inline, block 그리고 inline-block

css에서 display 속성은 element (요소)가 웹페이지에서 어떤 식으로 배치되는지를 결정한다. 그중에 3가지에 대해 알아보려고 한다.

inline

줄바꿈이 없는 속성으로 한 줄에 다른 element와 같이 배치된다. 대표적으로 <span>과 <a> 태그가 있다. 주의사항으로 inline 속성은 width와 height를 따로 지정해줄 수가 없는데 그 이유는 기본적으로 content 크기만큼의 width를 가지기 때문이다. 그리고 margin과 padding도 상, 하로는 지정할 수 없고 좌, 우로만 가능하다.

block

줄바꿈이 있는 속성으로 한 줄에 해당 element 하나만 배치되고 기본적으로 width가 100%로 설정되어 있다. 대표적으로 <div>와 <p> 태그가 있다. inline과는 다르게 width와 height를 지정해줄 수 있다.

inline-block

inline-block은 inline과 동일하게 content 크기만큼의 width를 가지기 때문에 한 줄에 다른 element와 같이 배치되지만 block과 동일하게 width와 height를 지정해 줄 수 있다.