[TIL] CSS display inline, inline-block, block

1. display

브라우저가 요소를 화면에 나타내는 방법을 제어하는 속성으로 block, inline, inline-block등이 있다.

2. Inline

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

inline 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있다.

- 줄바꿈을 하지않는다.
- width는 content 크기만 적용된다.
- height는 content 크기만 적용된다.
- inline 요소는 width, height 적용되지 않는다.
- 인라인 요소의 padding과 margin 적용시 상하 값은 블록요소에 영향을 주지 않는다.

3. block

<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

inline 요소 들은 위와 같은 요소들이 있으며 나열된 태그 말고도 많은 태그들이 있다.

- 블록요소는 줄바꿈이 되어 표현된다.
- 블록요소의 가로크기는 부모요소만큼 적용된다.
- 블록요소의 높이는 콘텐츠 크기만큼 적용된다.
- 블록요소에 width값을 적용하여 부모요소의 가로 크기보다 작더라도 가로전체는 해당요소의 영역으로 유지된다.
- 블록요소는 마진과 패딩을 적용할 수 있고 다른 블록요소에 영향을 준다.

4. inline-block

inline-block은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소이다.

- 줄바꿈이 표현되지 않는다.
- block처럼 width와 height를 지정 할 수 있다.
- 만약 width와 heigh를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.