block 레벨 요소와 inline 레벨 요소

   block 레벨과 inline 레벨   

block 레벨은 html 문서에서 공간에 상관없이 한 줄에 하나의 요소를 배치하는 속성을 말한다.

inline 레벨은 html 문서에서 공간이 허용하면 바로 옆에 배치되는 속성을 말한다.

 

   block 레벨 요소   

hearder

footer

nav

aside

main

section

div

span

form

article

..

 

   inline 레벨 요소   

a

button

input

label

img

video

audio

map

canvas

table

..

---

아래 코드의 결과 값은,

<div> this is a div. <i>And</i> i am ~ </div>
<div> this is a div. <pre>And</pre>i am ~ </div>

this is a div. And i am ~

this is a div

And

i am ~ 

 

<div> 는 block 요소이니 한 줄을 차지하고, 그 안의 <i> 태그는 inline 이니, 앞의 텍스트에 붙여서 나란히 놓여진다. 

<pre> 태그는 block 레벨 요소이니 한 줄을 차지하게 되어 그 위에 따라오는 "i am ~" 은 줄바꿈이 되어 총 4줄로 렌더링 된다.

 

 

■Ref

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow