[CSS] display property: inline, inline-block, block

이태권 (Taekwon Lee)·2022년 5월 25일
0

display property

display 속성은 웹 문서 상에서 요소들이 어떻게 보여지고 다른 요소들과 어떻게 상호 배치되는지를 결정한다.

inline

한 줄에 다른 요소들과 나란히 배치될 수 있다. 대표적으로 <a>, <em>, <span> 등이 있다.

inline-block

inline과 비교해 보자.

  • 공통점: 줄바꿈 없이 한 줄에서 다른 요소들과 나란히 배치된다.
  • 차이점: 기존 inline 요소에서 불가능하던 width, height, margin, padding의 상하 간격 지정이 가능해진다.

block

요소의 전후에 줄바꿈이 포함되기에, 다른 요소과 겹치지 않은 채로 독립적으로 한 줄을 차지한다. 대표적으로 <div>, <h1> ~ <h6>, <p> 등이 있다.

참고 자료

(DalSeo) [CSS] display 속성: inline, block, inline-block

(mdn) display

(ewaycorp) Improve Site Performance with Advantages of Inline CSS

profile
(Backend Dev.) One step at a time

0개의 댓글