[HTML] 블록 레벨 요소, 인라인 요소

HTML의 요소는 블록 레벨 요소와 인라인 요소로 분류돼있다.

 

블록 레벨 요소

부모 요소의 전체 공간을 차지하여 블록을 만든다.

언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.

항상 앞 뒤를 개행해서 그린다.

 

블록 요소는 인라인 요소 안에 중첩될 수 없지만, 인라인 요소는 블록 요소에 중첩될 수 있다.

(단, a태그의 경우는 예외적으로 안에 블록 요소가 중첩될 수 있다)

 

width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있다

 

ex

 article, aside, div, footer, form, header, main, section

 h1~h6, p, hr

 dl, dt, dd

 li, ol, ul

 

인라인 요소

항상 블록 레벨 요소 내에 포함된다

콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지한다.

개행을 하지 않는다

 

weight, height 를 지정할 수 없다

margin, padding, border 속성은 사용할 수 있지만, 상하 margin은 사용할 수 없다

 

ex)

a, audio, button, iframe, img, input, label,span, strong

 

개념적 차이

콘텐츠 모델

 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있고, 블록 요소는 포함할 수 없다.

 

 일반적으로 블록 레벨 요소는 인라인 요소와 다른 블록 레벨 요소를 포함할 수 있다.
 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 큰 구조를 생성할 수 있다.

 

서식

 인라인 요소는 개행을 강제하지 않지만, 블록 요소는 개행을 유발한다.

 

 

 

(참고 : mdn)