인라인 요소(span 등)

<span style="margin: 20px 20px;">Hello</span>
<span style="padding: 20px 20px;">World</span>

• 요소가 수평으로 쌓인다.
• 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도.
• 포함한 콘텐츠 크기만큼 자동으로 줄어든다.(글자는 가로, 세로 사이즈 지정 불가능)
• <span><div></div></span> 불가능

블록 요소(div 등)

<div style="width: 100px;">Hello</div>
<div style="padding: 10px;">World</div>

• 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도.
• 요소가 수직으로 쌓인다.
• 가로 사이즈가 부모 요소의 크기만큼 자동으로 늘어난다.
• 시각적으로 제어하는 부분에서 인라인 요소보다 더 잘 제어할 수 있다.
• <div><div></div></div>, <div<span></span></div> 가능