블록 구조 / 인라인 구조

블록 구조 / 인라인 구조

블록 구조의 특징은 한 줄 하나만 표현 됩니다. 가로로 정렬이 되지 않습니다. 또한 영역을 포현하는 부분이기 때문에, 마진 값이나 패딩 값이 먹힙니다.
인라인 구조의 경우에는 한 줄에 여러개가 표현이 되며, 가로로 정렬이 됩니다. 같은 인라인요소를 포함하지만, 블록 요소는 포함 불가능이다.

---

블록 구조(block)

div, p, h1~h6, ul, li, ol, table, form, section, footer 등 자주 사용하는 태그들이다.

div {
display: block;
}

See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.

---

인라인 구조(inline)

span, a, em, i, strong, b, del, ins, sub, sup, textarea 등 자주 사용하는 태그들이다. 참고로 padding 값은 적용이 됩니다.

li {
display: inline;
}

See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.