CSS Display
The display property is the master switch for how an element participates in layout. Change it and the rest of CSS behaves differently for that box.
The values you reach for most
| Value | Behaviour | Typical for |
|---|---|---|
block | Starts on a new line, fills the available width, respects width/height. | div, section, p. |
inline | Flows inside text, ignores width/height, vertical padding doesn't push siblings. | span, a, em. |
inline-block | Flows inline but respects width/height. | Nav links, buttons. |
flex | Children lay out along an axis (see Flexbox). | Toolbars, cards in a row. |
grid | Two-dimensional layout (see Grid). | Page layouts, image walls. |
none | Removes the element from the layout entirely — no box, no space. | Hiding via JS state. |
contents | Removes the box but keeps the children visible. | Restructuring without an extra wrapper. |
block vs inline at a glance
Tip: To hide something but keep it in the layout (still occupying space), use
visibility: hidden. display: none removes the box entirely.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Display</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Turn this list item into a block so width and height take effect.
li.tile { display:
; width: 200px; }
The opposite of inline.
Discussion
Loading…