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