[CSS]CSS의 display 속성값: inline, block, inline-block 비교

CSS의 display속성

CSS의 display 속성은 HTML 요소의 레이아웃을 지정하는데 중요한 역할을한다. element들이 화면에 어떻게 보여지고 element간에 어떻게 배치되는지를 결정한다.

그 중 display 속성값의 inline, block, inline-block에 대해 알아보자.

 

inline

display: inline 으로 설정된 element는 전후 줄바꿈 없이 한 줄에 다른 element와 함께 나란히 배치된다. 크기는 내부 콘텐츠에 맞게 자동으로 조정된다. width와 height 속성은 inline 요소에 적용되지 않는다.

예) <span>, <a>, <em> 태그

 

block

display: block 으로 설정된 element는 새로운 줄에 표시된다. 이 속성값을 가진 element는 한 줄을 차지하고, 다른 element는 다른 줄에 배치된다. 가로폭 전체를 차지하며, 기본적으로 너비를 가진다. 따라서 width와 height 속성을 사용하여 요소의 크기를 조정할 수 있다.

예) <div>, <p>, <h1> 태그

 

inline-block

display: inline-block 속성은 inline과 block의 특성을 혼합한 속성값이다. element는 다른 element와 같은 줄에 위치하며, width와 height을 지정할 수 있다.

예) <img>, <button>, <input> 태그