[html] 인라인(inline) / 인라인블록(inline-block) / 블록(block) 의 차이

웹사이트 만들어보다가 박스 배치가 원하는 대로 안 되는 경우가 많은데, 어디가 잘못된 건지 바로 알아내지 못하고 우왕좌왕 + 그때그때 구글링하는 것도 힘들어서 개념 한 번 확실히 정리하고 가는 게 좋을 것 같다 . . 

제일 헷갈리는 게 inline이랑 inline-block 차이 ! 이 차이 잘 알고 있으면 시간 단축 + 쓸 일 많을 거 같다

코딩애플🍎님 강의영상 보면서 정리했다 👉 https://codingapple.com/

 

📂block (블록)

- 브라우저에서 가로 한 칸을 모두 차지하는 요소
- 대표적으로 div / p / hr / h 태그 등

 

---

📂inline (인라인)

- block 요소의 반대 성질. 자기 크기만큼의 영역만 차지하는 요소
- 대표적으로 span / a 태그 등

 

• width / height 적용 불가
• margin / padding - top / bottom 적용 불가
• line-height 를 원하는 대로 적용 불가 (span태그에 적용X. 감싸고 있는 외부 div태그 전체 크기에 영향을 줌)

 

---

📂inline-block (인라인 블록)

inline태그이면서 block의 성질도 가지고 있는 요소
inline의 불편한 점들을 보완함. 예를 들면 높이와 너비가 설정 가능한 것

 

• width / height 적용 가능
• margin / padding-top / bottom 적용 가능
• line-height 설정 가능

 

---

그 런 데

이 때, inline-block 요소들끼리는 공백이 생기게 됨 . .       

????? . . .  프론트엔드 넘나 예민한 영역인 것 . . 

 

 

🔍해결방법

1.  부모 요소에 font-size : 0;를 적용 (공백의 font-size도 0이 되기 때문)
2.  요소와 요소 사이에 <! -- 주석 태그 -->  를 넣어준다.
3.  inline-block 요소끼리 높이가 안 맞아서 생기는 상위 공백 (=바닥 라인이 평행이 아니고 어그러지는 현상) 은
      vertical-align : 0;  으로 맞춰준다.