Block Element 와 Inline Element

Block Element :

• width, height, margin, padding 속성값 설정 가능
• 자동 줄바꿈
• 다른 요소 포함 가능
• P , H1~H6 , OL , UL , DL , DIV , NOSCRIPT , BLOCKQUOTE , FORM , HR , TABLE , FIELDEST , ADDRESS 등

Inline Element :

• width, height, margin, padding 속성값 설정 불가능
• 한줄로 인식
• Block Level 요소 포함 불가능
• A , IMG , OBJECT , BR , SCRIPT , MAP , Q , SUB ,SUP , SPAN , BDO 등

div0

div1

div2

span1 span2

Block 요소인 div 는 공간이 잡히는 반면 Inline 요소인 span 는 텍스트내용만큼의 공간만 잡힌다 ( 너비설정X )

Block 요소인 div 는 줄바꿈이되어 세로 정렬, Inline 요소인 span 는 한줄로 정렬된다

a1

span1 a1 span2

p

a3

Block 요소인 div 에는 Inline 요소 a , Block 요소 div 상관없이 포함이 가능하다

Inline 요소인 span 에는 Block 요소인 p 가 포함이 불가능하다 ( Inline 요소만 가능 )

inline과 block의 차이점

• inline은 줄바꿈이 되지 않지만, block은 줄바꿈 가능.
• inline은 width, height 속성을 사용할 수 없지만, block으로 설정하면 width, height 속성을 사용 가능.
• inline은 상/하 margin과 padding 속성을 사용할 수 없지만, block은 상/하 margin과 padding 속성 사용 가능.