Display

• 요소를 배치하여 레이아웃을 설정할 때 사용하는 속성
• box-type을 결정짓는 css 속성

1. block

대부분의 HTML element(이하 요소)는 block 요소이다. block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 것이다.

특징

1. 옆에 다른 요소가 들어올 수 없다.

2. width를 선언하지 않은 경우, width는 무보의 content-box의 100%
   따로 width를 선언한 경우, 남은 공간을 margin으로 자동 채운다.
   (개발자 도구에서 compute에 margin이 없는 것처럼 계산된다.✨)

3. 따로 height를 선언하지 않은 경우, 자신의 자식 요소의 height의 합이 부모 요소의 height가 된다.

4. 모든 css 속성이 적용 가능하다.

2. inline

inline 요소는 block 요소와 성질이 반대이다. 즉, inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.
<span>, <a>, <img> 태그 등이 inline 요소이다.

특징

1. inline이라는 속성 자체의 뜻대로 요소가 text와 같이 자연스럽게 흐른다.
2. body의 너비보다 width가 더 크다면, 자동으로 줄바꿈을 한다.
3. 위, 아래에 대한 css속성이 적용되지 않는다...!
   width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom

3. inline-block

block 요소의 특징과 inline 요소의 특징을 둘 다 가지고 있다고 생각하면 된다. 즉, 영역을 차지하되 자연스럽게 흐르는 모습을 가진다.

✏️ 결론

• block : 면
• inline : 선
• inline-block : 면 + 선의 속성