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> 태그는 예외이다.