HTML · Chapter 20 of 45
HTML Block and Inline Elements
Every HTML element has a default display type: block or inline. Block elements (like <div>, <p>, <h1>) start on a new line and take up the full available width.
Inline elements (like <span>, <a>, <strong>) do not start a new line and only take up as much width as their content needs. Understanding this distinction is key to controlling layout.
Syntax
display: block; / display: inline;Block-level elements
Block elements stack vertically and can contain other block or inline elements. Examples: <div>, <p>, <h1>-<h6>, <ul>, <table>.
Inline elements
Inline elements flow within text and cannot contain block-level elements. Examples: <span>, <a>, <img>, <strong>, <em>.
Example 1 (html)
<div>Block 1</div>
<div>Block 2</div>Output
Block 1
Block 2Each div starts on its own new line since divs are block-level.
Example 2 (html)
<span>Inline 1</span> <span>Inline 2</span>Output
Inline 1 Inline 2Spans sit next to each other on the same line since they're inline.
Key points
- Block elements start on a new line and fill full width.
- Inline elements flow within the surrounding text.
- <div> is the generic block container; <span> is the generic inline container.
- CSS display property can override default block/inline behavior.
💡 Note: display: inline-block combines features of both, allowing width/height while staying inline.