HTML Block & Inline
Every element is either block-level or inline, which controls how it flows on the page.
Block elements start on a new line and take the full width available. Inline elements sit within a line of text and take only as much width as they need.
Block vs Inline
The div Element
<div> is the generic block container, often used to group other elements so they can be styled together.
A div container
<!DOCTYPE html>
<html>
<body>
<div style="padding:10px; background:#f0f0f0;">
<h2>Card title</h2>
<p>Card body.</p>
</div>
</body>
</html>The span Element
An inline span
<!DOCTYPE html>
<html>
<body>
<p>The total is <span style="color:green;">$42</span> today.</p>
</body>
</html>Note: <div> and <span> have no meaning of their own; they are neutral hooks for styling and grouping.
Exercise: HTML Block & Inline
How does a block-level element typically behave in page layout?
