본문 바로가기
IT

CSS > inline, block, inline-block

by 내일은교양왕 2023. 8. 28.

inline

새로운 라인에서 시작하지 않고 내용만큼 너비를 차지

너비와 높이를 설정하더라도 적용되지 않음

margin 속성은 좌우 간격만 반영되고, 상하 간격은 반영되지 않음

padding은 적용됨

ex) span, a, em

 

 

block

새로운 라인에서 시작하며 해당 라인에서 최대한 전체 너비를 차지

상위요소의 전체 너비를 차지

width, height, margin, padding 속성 모두 반영 됨

ex) div, p, h1

 

 

inline-block

새로운 라인에서 시작하지 않고 내용만큼 너비를 차지

높이와 너비 값을 설정 할 수 있음

width, height, margin, padding 속성 모두 반영 됨

ex) button, input, select

'IT' 카테고리의 다른 글

web > popstate  (0) 2023.09.25
[nextjs] router.beforePopState  (0) 2023.09.25
CSS Specificity  (0) 2023.08.26
CSS Inheritance  (0) 2023.08.26
CSS Box Model  (0) 2023.08.24