display의 대표 속성 3가지 inline, block, inline-block

필자는 css 라이브러리 등을 사용하지 않고 pure css로 디자인 하는 것을 좋아하는데, 가끔 생각한대로 동작하지 않을 때가 있다 대표적으로 display 속성이 그러한데 기본적인건 이미 다 알고 있다고 생각하지만 확실하게 알고 가기 위해 기본중의 기본인 CSS에서 매번 사용하는 display의 대표 속성 3가지 inline, block, inline-block를 알아봅니다.

---

inline

대표적인 엘리먼트

• <span>
• <a>

특징

• 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
• *width, heigh의 속성을 지정해도 무시**된다.
• *margin, padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영하지 않는다.

inline의 특징은 해당 태그가 마크업하고 있는 컨텐츠의 크기만큼만 공간을 차지한다.

---

block

대표적인 엘리먼트

• <div>
• <p>
• <h1>, <h2>...

특징

• block 엘리먼트 들은 전후 줄바꿈이 적용되, 한 줄을 차지한다.
• width, heigh, margin, padding 속성이 모두 반영된다.

---

inline-block

대표적인 엘리먼트

• <button>
• <input>
• <select>

특징

inline과 block의 특징을 합쳐 놓은것 처럼 inline-block으로 지정된 엘리먼트는

• inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되며,
• block 엘리먼트처럼 width, heigh, margin, padding의 속성들이 모두 적용됩니다.

특징

• block 엘리먼트 들은 전후 줄바꿈이 적용되, 한 줄을 차지한다.
• width, heigh, margin, padding 속성이 모두 반영된다.