CSS Block/Inline

Block / Inline

display: inline

대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.

  • width/height 적용불가
  • margin/padding-top/bottom 적용불가
  • line-height를 원하는대로 사용할 수 없다.

display: block

block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 div가 있다.

inline-block

inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다. 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능) inline속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있는 특징이 있다.

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

** 고려사항

inline-block 사이에 공백이 생기게 되는데, parent 태그에 font-size: 0를 적용하면 해결된다. inline-block 끼리 높이가 안맞을 때 상위 공백이 생기게 되는데 vertical-align: top을 적용하면 해결할 수 있다.

추가

  • block으로 설정하면 줄바꿈 되고, inline으로 설정하면 줄바꿈 되지 않는다.
  • block으로 설정하면 상/하 margin과 padding 속성을 사용할 수 있지만, inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없다.
  • block으로 설정하면 width, hight 속성을 사용할 수 있지만, inline으로 설정하면 width, hight 속성을 사용할 수 없다.
  • block구조는 inline구조 안으로 들어갈 수 있지만, inline구조는 block구조 안으로 들어갈 수 없다. HTML5부터 <a> 태그는 예외이다.