[Wecode] inline, block, inline-block

inline

전후 줄바꿈 없이 한 줄에 다른 요소와 나란히 배치

예) <span> <a> <em>

 

width 와 height 속성을 지정해도 무시됨

해당 태그의 컨텐츠의 크기만큼만 공간 차지

margin, padding 역시 좌우 간격만 반영되고 상하 간격은 반영되지 않음

block

전후 줄바꿈이 들어가 다른 요소를 다른 줄로 밀어내고 한 줄을 차지

예) <div> <p> <h1>

 

inline 과 달리 width, height, margin, padding 속성 모두 반영

inline-block

하이브리드

전후 줄바꿈 없이 한 줄에 다른 요소와 나란히 배치되나

width, height 및 margin, padding 속성 상하 간격 지정 가능

내부적으로 block 규칙을 따르면서 외부적으로 inline 규칙을 따름

 

 

<참고 포스팅>

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

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