[CSS] Inline, Block box 📦

📌 Inline

*display 속성이 inline인 엘리먼트는 "나란히" 배치(줄바꿈 x)*

width와 height 속성은 무시되고 해당 태그가 마크업하고 있는 요소의 크기 만큼만 공간을 차지한다.

margin과 padding 속성은 좌우 간격만 반영되고, 상하 간격은 반영되지 않는다.

 

defalut가 inline인 태그 : <span> <a> <em> <strong> 등

 

📌 Block

*display 속성이 block인 엘리먼트는 "세로로" 배치(줄바꿈 o)*

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

 

defalut가 block인 태그 : <div> <p> <h1> 등

 

📌 Inline-Block

*display 속성이 inline-block인 엘리먼트는 "나란히" 배치(줄바꿈 o)*

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

 

defalut가 inline-block인 태그 : <button> <input> <select> 등