HTML elements are categorized as block-level or inline based on how they behave in the layout.
1️⃣ Block Elements
- Take up full width of their container by default
- Always start on a new line
- Can have width, height, margin, and padding applied
- Common examples:
<div>,<p>,<h1>–<h6>,<section>,<article>
Example:
<div style="background: lightblue; padding: 10px;">Block Element</div>
<p style="background: lightgreen; padding: 10px;">Another Block</p>
Behavior:
Each element appears on a new line, stacking vertically.
2️⃣ Inline Elements
- Take up only as much width as their content
- Do not start on a new line
- Cannot set width or height directly
- Common examples:
<span>,<a>,<strong>,<em>,<img>
Example:
<span style="background: yellow;">Inline 1</span>
<span style="background: orange;">Inline 2</span>
Behavior:
Elements sit side by side horizontally if there’s space.
3️⃣ Key Differences
| Feature | Block Element | Inline Element |
|---|---|---|
| Width | Full width of parent container | Width of content only |
| Line Break | Starts on a new line | Does not start on a new line |
| Height/Width CSS | Can be applied | Cannot be applied directly |
| Examples | <div>, <p>, <section> |
<span>, <a>, <strong> |
⚡ Tip:
- You can change inline to block using CSS:
span {
display: block;
}
- You can also make block elements inline:
div {
display: inline;
}
In short:
Block elements occupy full width and stack vertically, while inline elements flow horizontally within a line and occupy only the space needed by their content.
