post항해_배움일지/Web

Web_display: inline, block, inline-block

딩디링동 2021. 9. 12. 13:52

display: inline

display: inline이 지정된 요소는 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다.

width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다.

display: block

display: block이 지정된 요소는 앞뒤 줄바꿈이 들어가 한 줄을 모두 차지한다.

width, height, margin, padding 속성이 모두 반영된다.

display: inline-block

display: inline-block이 지정된 요소는 inline 요소처럼 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만,

block 요소처럼 width, height, margin, padding 속성이 모두 반영된다.


참고

 

[CSS] display 속성: inline, block, inline-block

Engineering Blog by Dale Seo

www.daleseo.com