inline, inline-block, block

HTML에서 각각의 요소(element)들은 저마다의 고유의 display 속성들을 가지고 있다.
이 display 속성들은 저마다 어떠한 원리로 페이지안에서 배치되고 다른 요소들과 상호작용을 이루는지 결정한다.

따라서 이러한 속성들의 원리를 모른체 CSS를 작성하는것은 어불성설이라고 할 수 있다.

1. inline

display 속성이 inline인 경우 해당 요소는 컨텐츠의 크기에 딱 맞는 크기로 지정이 된다고 보면 된다. 즉, 줄바꿈이 일어나지 않으며 다른 inline 요소들 옆에 차례대로 위치한다.

inline 요소를 다룰 때 주의해야할점은 width 와 height 속성을 지정해줘도 무시된다는점이다.
또한 margin, padding 속성은 좌우간격만 반영되고 상하간격은 반영되지 않는다.

ex) <span> <a> <em>

2. block

display 속성이 block인 경우 해당 요소는 한줄을 통으로 차지하게 된다.

block 요소는 inline 요소와 다르게 width, height, margin, padding 속성이 모두 반영된다.

ex) <div> <p> <h1>

3. inline-block

inline-block의 경우 inline 과 block 요소의 특성을 모두 가지게 된다. inline 요소처럼 한줄에 나란히 배치되지만, block 요소처럼 width, height 지정이 가능하고 margin, padding의 상하간격 지정이 가능하다.

내부적으로는 block요소의 특성을, 외부적으로는 inline요소의 특성을 따라간다고 볼 수 있다.

ex) <button> <input> <select>