block? lnline?

블록과 인라인 요소 알아보기

html의 태그들은 어떠한 형태로 공간을 차지하는가에 따라 block과 lnline로 나누어진다.
block은 한 단락을 전부 차지하는 것처럼 보인다.
inline은 왼쪽부터 차근차근 줄을 차지하면서 보인다.

---

block 요소

대표적인 블록 요소로는 p태그, h1태그(헤딩태그), <div>가 있다.
블록 태그는 한 단락을 전부 차지하기 때문에 항상 새로운 라인에서 시작한다.

 

블록 태그의 영역

---

inline 요소

인라인 요소는 a태그, img, span태그 등이 있으며, 같은 줄에 여러 개가 함께 배치가 가능하다.

상하의 마진, 크기(width, height)를 사용할 수 없다. 또한 블록 요소 안에 삽입되어 같이 쓰인다.

 

인라인 태그의 영역

---

 

블록 태그와 인라인 태그의 margin

 

블록태그의 margin적용 모습

인라인 태그의 margin적용 모습

 

margin 적용 모습

블록 태그와 인라인 태그 둘 다 마진 40px을 넣어줬지만, span태그(인라인 태그)는 상하의 마진이 사용되지 못한 모습을 볼 수 있다.

 

---

inline-block

inline요소처럼 내부 크기만큼 높이와 너비가 설정된다.

또한 block요소처럼 크기 설정이 가능하며, padding과 margin 여백을 지정할 수 있다.
display:inline-block;을 사용해서 속성을 부여할 수 있다.