The CSS display Property
The display property is one of the most important properties for controlling layout. It sets whether an element is treated as a block or an inline element.
Every element has a default display value based on its type, usually block or inline. The display property lets you change that default behavior.
Block-level Elements
A block-level element always starts on a new line and takes up the full width available.
The <div> is a block-level element. Other examples include <h1>–<h6>, <p>, <form>, <header>, <footer>, and <section>.
Inline Elements
An inline element does not start on a new line and only takes up as much width as it needs.
Examples of inline elements include <span>, <a>, and <img>.
Display Values
The display property has many values. The most common are:
inline— shows the element as an inline element.block— shows the element as a block element.contents— makes the container disappear, so its children move up a level in the DOM.flex— shows the element as a block-level flex container.grid— shows the element as a block-level grid container.inline-block— formats the element as inline, but lets you set height, width, padding, and margin.none— hides the element completely, so it takes up no space.
Override the Default Display Value
The display property changes the default behavior of an element. Changing an inline element to block, or the other way around, can help the page look the way you want while still following web standards.
Note: Setting display only changes how the element is shown, not what kind of element it is. So an inline element with display: block still cannot contain other block elements.
Span as block
The inline <span> elements are shown as block elements, each on its own line.
<style> block, set span { display: block; }. Add a few <span> elements so they each appear on their own line instead of inline.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>A span element displayed as a block.</span>
<span>Another span element on its own line.</span>
<span>A third span element on its own line.</span>
</body>
</html>
Link as block
The inline <a> elements are shown as block elements, each on its own line.
<style> block, set a { display: block; }. Add a few <a> links so each appears on its own line.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
display: block;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">Link one</a>
<a href="https://prompt-cookbook.com">Link two</a>
<a href="https://prompt-cookbook.com">Link three</a>
</body>
</html>
Example of More Display Values
You can apply several different display values to elements.
Example
Six paragraphs use none, inline, block, inline-block, flex, and grid.
<style> block, make six paragraph classes: ex1 none, ex2 inline, ex3 block, ex4 inline-block, ex5 flex, ex6 grid. Add a labeled paragraph for each so the different display behaviors show (the "none" one will be hidden).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display: grid;}
</style>
</head>
<body>
<p class="ex1">display: none (this paragraph is hidden).</p>
<p class="ex2">display: inline.</p>
<p class="ex3">display: block.</p>
<p class="ex4">display: inline-block.</p>
<p class="ex5">display: flex.</p>
<p class="ex6">display: grid.</p>
</body>
</html>