CSS : inline, inline-block, block

display 프로퍼티

display 프로퍼티는 요소의 표기 특성을 지정한다. (ex : block, inline, inline-block, flex, grid 등)

 

block

block 프로퍼티를 가진 요소는 화면 가로폭 전체를 차지 (width : 100%)하며, 항상 새로운 줄에서 시작한다.

* 기본 크기는 가로폭 전체이지만, width, height, margin, padding등의 프로퍼티를 설정할 수 있다.

** block 프로퍼티 요소의 예시로는 div, h1~h6, p, ol, ul, li, hr, table, form 이 있다.

*** block 요소 내에 inline 요소를 포함할 수 있다.

 

inline

inline 프로퍼티를 가진 요소는 content 너비만큼 가로폭이 설정되며, 새로운 라인으로 형성되지 않고 다른 요소와 함께 같은 줄에 위치할 수 있다. 

* width, height, margin, padding 등의 프로퍼티를 지정할 수 없다.

** inline 프로퍼티 요소의 예시로는 span, a, strong, img, br, input, select, textarea, button이 있다.

*** inline 요소 내에는 block 요소를 포함할 수 없다.

 

inline-block

block과 inline의 요소를 모두 갖는다. inline과 같이 한 줄에 포함되면서 width, height, margin 프로퍼티를 지정할 수 있다.

 

참고 1 : 링크

[CSS] display 속성 사용하기

참고 2 : 링크 

CSS3 Display | PoiemaWeb