CSS Display
The display property is the single most important control for layout, deciding whether an element stacks, sits inline, or becomes a flex or grid container.
Every element has a default display value from the browser. Headings and paragraphs are block, while links and spans are inline. Changing display changes how the element flows and what layout features become available.
The common display values
Block versus inline
A block element takes up a full row, so two blocks stack vertically. An inline element only takes the space its content needs and sits alongside text. Crucially, width and height have no effect on a pure inline element.
Turning list items into a row
<!DOCTYPE html>
<html>
<head>
<style>
nav li {
display: inline-block;
padding: 8px 12px;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>Modern layout with flex
Setting display: flex on a parent lets you align and distribute its children easily. It is the go-to tool for toolbars, cards, and centering content.
A simple flex row
<!DOCTYPE html>
<html>
<head>
<style>
.toolbar {
display: flex;
gap: 12px;
align-items: center;
}
</style>
</head>
<body>
<div class="toolbar">
<button>Save</button>
<button>Cancel</button>
<span>Draft</span>
</div>
</body>
</html>Exercise: CSS Display
Which display value makes an element start on a new line and accept width/height settings?
