display

display

속성 inline

display속성이 inline으로 지정된 요소는 한줄에 다른 엘리먼트들과 나란히 배치된다
ex) <span>, <a>, <em>
content의 크기만큼만 공간을 차지 하기 때문에 width와 height속성을 지정해도 무시된다.
margin과 padding의 속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다.

속성 block

display속성이 block으로 지정된 요소는 width 기본값이 100%이다.
고로 전후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한줄을 차지한다.
ex)<div>, <p>, <h1>
inline속성과 달리 width와 height, margin과 padding 모두 잘 반영된다.

속성 inline-block

display속성이 inline-block으로 지정된 요소는 inline요소처럼 전후 줄바꿈 없이
한 줄에 다른 요소들과 나란히 하지만
inline에서 불가능하던 width와 height속성 지정 및 margin과 padding속성의 상하 간격 지정이 가능해진다.
ex) <button>, <select>
inline-block을 이용하면 여러 개의 요소를 한 줄에 원하는 너비만큼 배치할 수 있다.

float과 inline-block 모두 수평구조를 만들기 위한 방법이지만 다양한 문제를 야기할 수 있어
현재는 display: flex; 로 수평구조를 형성한다.