TIL -04. CSS 레이아웃(2): inline-block,block 차이

1번째에 이어서 이번에는 inline과 block에 대해서 알아보겠습니다.

inline은 어디서 들어보지 않았나요?

바로 설명을 시작하겠습니다.

1. display:inline;

• 대표적인 태그로는 <span>태그가 있다.

• text 크기만큼만 공간을 차지하고, 줄바꿈을 하지 않는다.

   width/height 적용불가능
   margin/padding-top/bottom 적용불가능
   line-height를 원하는 대로 사용 불가능

2. display:block;

• 대표적인 태그로는 <div>

      block속성은 무조건 한줄 차지!
      다음 태그는 무조건 줄바꿈이 적용

3. display:inline-block;

• 이 속성은 1번과 2번의 속성을 둘 다 갖고 있다.

      ```
      width/height 적용 가능
      margin/padding-top/bottom 적용 가능
      line-height 적용 가능
      ```