block vs inline vs inline-block

각 HTML 태그들은 block, inline 두가지의 속성을 기본적으로 갖고있다

block

• 특징

1. 줄바꿈이 일어난다.
2. 기본적으로 100%의 넓이를 갖고있다.
3. width, height 을 조절할 수 있다.

대표적으로 div, p, ul, ol, li, h1 ~ h6 등의 태그들이 block 요소에 포함된다.

inline

• 특징

1. 줄바꿈이 일어나지 않는다.
2. 태그 안의 글자가 차지하는 만큼의 넓이만 갖는다.
3. width, height 을 조절할 수 없다.

대표적으로 span, img, a, input 등의 태그들이 inline 요소에 포함된다.

inline-block

• 특징

1. 줄바꿈이 일어나지 않는다.
2. 기본적으로 태그 안의 글자가 차지하는 만큼의 넓이를 갖지만 width, height 을 조절할 수 있다.

display 속성을 이용하여 따로 지정을 해줄 수 있다.