HTML — Lesson 11
Block vs Inline Elements
Understanding element display behavior and how to change it.
Block vs Inline Elements
HTML elements have a default display behavior: they either start on a new line (block) or flow within text (inline).
Block-Level Elements
Block elements start on a new line and take up the full available width.
<!-- Block elements always stack vertically -->
<div>Full width block</div>
<p>Another block</p>
<h1>Heading is a block</h1>
<ul>List is a block</ul>
<table>Table is a block</table>
Inline Elements
Inline elements flow within text and only take up as much width as needed.
<p>
This is a paragraph with
<strong>bold</strong>,
<em>italic</em>, and
<a href="#">links</a>
all flowing on the same line.
</p>
Key Differences
| Property | Block | Inline |
|---|---|---|
| New line | Yes | No |
| Width/Height | Respects (full width) | Ignores |
| Margin (top/bottom) | Yes | No effect |
| Margin (left/right) | Yes | Yes |
| Padding | All sides | Horizontal only (visual only) |
| Examples | div, p, h1-h6, ul, li | span, a, strong, em, img |
Changing Display with CSS
/* Make a span behave like a block */
span.block-span {
display: block;
width: 200px;
height: 100px;
background: lightblue;
}
/* Make a div flow inline */
div.inline-div {
display: inline;
}
/* Inline-block: inline flow + width/height */
.badge {
display: inline-block;
padding: 4px 12px;
background: #333;
color: white;
border-radius: 4px;
}
Tip: For modern layouts, use Flexbox or Grid instead of relying on block/inline behavior. But understanding these basics is essential for working with inline elements like badges, tags, and links.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →