display 속성 정리

block

block은 특정 영역을 차지 하는 박스형태을 가지는 성질이다. 그래서 기본적으로 block은 width의 값이 100%가 되서 뒤에 오는 새로운 요소들이 새라인에 추가된다.

가로(width)와 세로(height) 크기를 지정할 수 있으며, padding과 margin으로 안쪽과 바깥쪽의 여백을 만들 수 있다.

inline

주로 텍스트를 쓰고싶을 때 사용한다. 그래서 컨텐츠 영역만큼 가로의 크기가 정해지게 되어 뒤에 오는 새로운 요소들이 새라인에 추가되지 않는다.

가로와 세로의 크기를 임의로 지정할 수 없으며, 크기를 지정하기 위해서는 따로 css 영역에서 font-size를 설정해야 된다.

inline-block

inline-block은 위에서 설명했던 block과 inline의 특징을 모두 가진 요소이다.

조금 더 설명해 보자면 block의 특징인 width와 height을 이용하여 가로와 세로의 크기를 지정할 수 있게 되고 inline의 특직인 뒤에 오는 요소가 새라인에 추가되지 않는다.
만약 width와 height을 지정하지 않았다면 inline과 같이 컨텐츠의 크기만큼 영역이 잡히게된다.

inline-block의 문제점