display속성의 inline, inline-block, block

display속성은 웹페이지 상에서 요소들이 다른 요소들과 어떻게 배치될지 결정하는 속성이다.
display속성에는 inline, block, inline-block이 있다.

1.inline

display: inline;은 줄바꿈 없이 다른 inline인 엘리먼트들과 나란히 같은 줄에 배치된다.
대표적으로 span태그와 a태그 등이 있다.
inline엘리먼트를 사용할 때 주의점은 width와 height를 지정해도 무시된다. 해당 태그가 마크업 하고 있는 컨텐트의 크기 만큼만 공간을 차지하고 있기 때문이다.

2.block

display: block;은 엘리먼트 한개가 한줄을 다 차지한다.
때문에 그 다음에 오는 다른 엘리먼트들은 줄바꿈이 된다.
또한 block엘리먼트는 width, height, margin, padding 속성이 모두 적용된다. 대표적인 block엘리먼트로는 div와 p태그 등이 있다.

3.inline-block

display: inline-block;은 inline과 block의 속성을 모두 가지고 있다. inline엘리먼트 처럼 줄바꿈 없이 한줄에 다른 엘리먼트들과 배치될 수 있고, block엘리먼트 처럼 width, height등이 지정이 가능하다.
따라서 내부적으로는 block엘리먼트의 규칙을 따르면서, 외부적으로는 inline엘리먼트의 규칙을 따르는 것 이다.
대표적인 inline-block엘리먼트로는 button, input태그 등이 있다.