display property
display 속성은 웹 문서 상에서 요소들이 어떻게 보여지고 다른 요소들과 어떻게 상호 배치되는지를 결정한다.
inline
한 줄에 다른 요소들과 나란히 배치될 수 있다. 대표적으로 <a>, <em>, <span>등이 있다.
inline-block
inline과 비교하면 줄바꿈 없이 한 줄에서 다른 요소들과 나란히 배치된다는 공통점이 있다.
inline 요소에서 불가능하던 width, heightm margin, padding의 상하 간격 지정이 가능해진다.
block
요소의 전후에 줄바꿈이 포함되기에, 다른 요소과 겹치지 않은 채로 독립적으로 한 줄을 차지한다.
대표적으로 div태그, h1 ~ h6태그, p태그 등이 있다.
아래에 참고할만한 자료들을 추가로 공유합니다.
no pain, no gain