Block & Inline Elements
Every element has a default way of taking up space. Block elements stack vertically and fill the available width; inline elements flow along a line of text. Knowing which is which explains most "why is my layout doing that?" moments.
Block elements
The dashed outlines reveal that each block element:
- starts on a new line;
- stretches to fill the full width of its container;
- can have width, height, margins and padding set freely.
Common block elements: <p>, <h1>–<h6>, <div>, <ul>, <ol>, <li>, <table>, <form>, <section>, <article>, <header>, <footer>, <blockquote>, <pre>, <hr>.
Inline elements
Inline elements:
- sit within the line of text, without starting a new line;
- are only as wide as their content;
- ignore
widthandheight, and their vertical margins don't push other lines away.
Common inline elements: <a>, <span>, <strong>, <em>, <code>, <abbr>, <time>, <br>, and replaced elements like <img>, <input> and <button> (which, unusually, do accept width and height).
Changing the display with CSS
"Block" and "inline" are just default CSS display values. CSS can change them without changing the element's meaning:
display | Behaviour |
|---|---|
block | New line, full width, accepts width/height |
inline | Flows in text, content-sized |
inline-block | Flows in text, but accepts width, height and vertical padding — great for buttons and badges |
flex, grid | Layout containers for their children (lesson 25) |
none | Removed from the page entirely |
Content rules
HTML has rules about what can go inside what. The main ones:
- A
<p>may contain only inline ("phrasing") content — no<div>, lists, headings or other paragraphs. - Inline elements generally shouldn't contain block elements — with the important exception of
<a>, which may wrap blocks as long as there are no interactive elements inside. - Interactive elements can't nest: no link inside a link, no button inside a link.
<p>This paragraph contains a list: <ul><li>which is not allowed</li></ul> </p>
Browsers "fix" this by closing the paragraph before the list, leaving an empty stray paragraph afterwards — and your CSS stops matching what you expected.
Whitespace between inline elements
Line breaks between inline-block elements in your source become a visible space. The second row has no whitespace between tags, so there's no gap. Flexbox and Grid layouts don't have this quirk.
Try it yourself
Change display: inline-block to block, then to inline, and watch how the tags behave: