Bootcamp
Search…
CSS.2.2: Display: Inline and Block
display is the first css style property we'll talk about that actually affects the layout of elements on the page. To begin with we'll talk about the basic layout display values: inline, block and inline-block.
See a full list of all possible display values here: https://developer.mozilla.org/en-US/docs/Web/CSS/display​

Block vs Inline

display is set by default for every element, either to inline or block.
Here are some example default display values:
Element Name
Default Display Value
h1, h2, etc.
block
p
block
section
block
a
inline
span
inline
input
inline

Block

block display value means that there is a line break before and after the element. By default that element fills out all the horizontal space.

Inline

inline display elements wrap text within the element, spreading the element across more than one line. The end of an inline element does not cause a line break.

Rules

Given the following example:
<span>span 1 inline</span>
<h2>h two 1 : block</h2>
<span>span 2 inline</span>
<span>span 3 inline</span>
<h2>h two 2 : block</h2>
<h2>h two 3 : block</h2>

Block / Inline Line Breaks

Block elements will line break before and after. This also affects inline elements. Inline elements will stack horizontally.

Inline Line Breaks

Inline elements will line break inside the element.

Inline / Block Margin

Another major difference between the two values is that it is not possible to set vertical (top and bottom) margins on inline elements.
Given the following code:

index.html

<span>span 1 inline</span>
<h2>h two 1 : block</h2>
<span>span 2 inline</span>
<span>span 3 inline</span>
<h2>h two 2 : block</h2>
<h2>h two 3 : block</h2>

styles.css

body {
background-color: pink;
}
​
span {
margin-top: 400px;
background-color: white;
}
​
h2 {
margin-top: 40px;
background-color: aqua;
}
Notice that a margin is applied on the block element. However, even though a large margin is set on the inline element, it is not applied.

CSS Block Margin Gotcha: Margin Collapse

More about Layout Margins

Copy link
On this page
Block vs Inline
Rules
Inline / Block Margin
CSS Block Margin Gotcha: Margin Collapse
More about Layout Margins