inline, block, inline-block 차이점

display 프로퍼티의 값인 block, inline, inline-block들의 차이점에 대해서 알아보려고 한다.

모든 HTML의 태그들은 각자의 display 기본값을 가지고 있다.
예를들어,
header, footer, p, li, table, div, h1 등의 태그들은 display:block; 의 성질을 기본 값으로 가지고있고,
span, a, img 태그 등은 display: inline; 의 성질을 기본 값으로 가지고 있다.

1. display: inline;
2. display: block;
3. display: inline-block;

1. inline 은 말 그대로 요소들이 한줄에 나란히 올 수 있다. 해당요소의 content 크기만큼만 차지하고, 다른요소들은 옆으로 오게된다.

2. block 한줄 전체를 차지한다. 항상 새 줄에서 시작하며 좌우로 최대한 늘어난다.(block은 너비를 줄여도 다른 요소들이 옆자리를 차지할수없다. 다음줄로 넘어가서 그 줄의 전체를 차지한다.)

3. inline-block은 inline처럼 내용물(content)의 크기만큼만 차지하는 것도 아니고, block처럼 한줄 전체를 차지하지도 않는다.
   너비와 높이를 조절할수있으며 설정된 크기만큼만 차지한다.