블록 구조 / 인라인 구조

블록 구조와 인라인 구조

HTML의 태그들은 블록 요소와 인라인 요소로 분류됩니다. 블록 구조의 태그들은 보통 div , p, h1-h6, ul, li, ol, table이 있고,
인라인 구조에서는 span , a, em, i, strong이 있습니다.

블록 구조와 인라인 구조의 비교

코드펜에서 둘을 비교해 보았습니다.

둘을 사용하였을 때에 특징의 비교

블록 구조	인라인 구조
줄바꿈이 일어날정도로 한 줄을 차지하고 있습니다.	줄바꿈을 하지 않고 태그 안에 쓰여진 내용만큼만 공간을 차지합니다.
블록 구조 안에는 블록 구조나 인라인 구조가 올 수 있습니다.	인라인 구조 안에는 인라인 구조는 올 수 있으나, 블록 구조가 올 수 없습니다. (그러나 a 태그는 가능합니다.)
블록 구조는 margin이나 padding 값을 먹일 수 있습니다.	인라인 구조는 margin이나 padding 값을 먹일 수 없습니다.