[HTML] 블록(block), 인라인(inline) 요소

블록 레벨 요소 (Block Level Element)

• 전후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄 차지
• 항상 새로운 라인에서 시작
• 전체 가로 폭 차지 (width: 100%)
• width, height, margin, padding 프로퍼티 지정 가능
• block 요소 내에 inline 요소 포함 가능 (반대는 불가능.)
• ex) div, h1~h6, p, ol, ul, li, hr, table, form ...

 

인라인 레벨 요소 (Inline Level Element) 

• 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치
• 새로운 라인에서 시작 X. 문장 중간에 들어갈 수 있다 (줄 바꾸지 않고 다른 요소와 함께 한 행에 위치)
• content의 너비만큼 가로 폭 차지
• width,height 속성 무시.
• margin, padding 속성은 좌우 간격만 반영. 상하 간격은 반영 X 
  • padding-top, padding-bottom, margin-top, margin-bottom 속성 무시
• 요소 뒤에 공백 있는 경우, 4px 자동 지정
• inline 요소 내에 block 요소 포함 불가능
• 일반적으로 block 요소에 포함되어 사용됨
• ex) span, a, strong, img, br, input, select, textarea, button ...

 

<!-- 불가능. inline 요소 내에 blcok 요소 올 수 없다. -->
<a><div></div></a>

<!-- 가능. block 요소 내에 inline 요소 올 수 있다. -->
<div><a></a></div>