CSS / inline-block

inline

inline 요소는 width와 height값 지정을 무시한다.

margin과 padding(콘텐츠와 요소 테두리 사이의 거리를 정의)은 좌우만 반영된다.

span, a 등이 inline 요소에 속한다. (그냥 한 줄에 같이 들어가는 요소라고 생각하면 편하다.)

 

block

혼자 한 줄을 차지하는 것이 block이다. 대표적으로 div가 있다.

 

inline-block

inline요소를 block으로 쓰려면 display: inline-block을 해주면 된다.

기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.

그러나 block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.

button, input, select 등이 기본적으로 이 속성을 가진다.

 

 

a를 inline-block으로 설정했을 때.

a의 inline-block을 없애고 원래의 inline으로 되돌렸을 때.

 

---

Reference

https://www.w3schools.com/css/css_inline-block.asp

CSS Layout - inline-block

 

https://www.daleseo.com/css-display-inline-block/

CSS의 display 속성: inline, block, inline-block