[CSS] display 속성 (inline, block, inline-block 비교)

inline

display 속성이 inline으로 지정된 엘리먼트는 줄 바꿈 없이 컨텐츠가 옆으로 나란히 나열된다.

대표적으로 <span> 태그가 inline 속성을 가진 태그이다.

display: inline 속성을 사용할 때 주의할점이 있는데 width와 height 속성을 적용하더라도 무시된다.

inline 속성은 무조건 해당 컨텐츠 크기만큼 width와 height가 고정이기 때문이다.

또한 margin과 padding 속성운 좌우에만 적용이 가능하고 상하에는 적용하더라도 무시된다.

display 속성이 block으로 지정된 엘리먼트는 해당 컨텐츠가 한줄을 모두 차지해 다른 컨텐츠가 줄바꿈이 되도록한다.

대표적으로 <div> 태그가 block 속성을 가진 태그이다.

display: block 속성을 사용할 때는 inline 속성과 달리 width, height 그리고 margin, padding 속성이 좌우상하 모두 적용 가능하다.

display 속성이 inline-block으로 지정된 엘리먼트는 위 두 속성(inline, block)을 하이브리드한 속성이다.

외부적으로 보여지는 표현되는 방식은 inline 속성과 같이 동작하지만 block 속성에서만 적용할 수 있었던 witdh, height, margin, padding 속성 적용이 가능하다.

즉, 외부적으로는 inline 속성처럼 동작하지만 내부적으로는 block 속성처럼 동작한다.

대표적으로 <button>, <input>, <select> 태그 등이 있다.