Every element has a display type that determines how it behaves on the page. Some sit next to each other, others stack on top. Some disappear entirely. Understanding display is the key to layout.
Block Elements
Block elements start on a new line and take up the full width available. They stack vertically like bricks:
h1, h2, p, div {
display: block;
/* this is the default for these elements */
}
Block elements respect width, height, margin, and padding on all sides. Common block elements include <div>, <p>, <h1> through <h6>, and <section>.
Inline Elements
Inline elements sit next to each other on the same line. They only take up as much space as their content needs:
span, a, strong, em {
display: inline;
/* this is the default for these elements */
}Inline elements ignore width and height. Top and bottom margins also get ignored. They just flow with the text.
Inline-Block
inline-block is the best of both worlds. Elements sit on the same line like inline, but they respect width, height, and margins like block:
.btn {
display: inline-block;
width: 120px;
padding: 10px;
margin: 5px;
}This is the go-to choice for navigation items, buttons in a row, or any grid of boxes that need to sit side by side.
display: none
display: none removes the element from the page entirely. It takes up no space, as if it never existed:
.hidden {
display: none;
}
Do not confuse this with visibility: hidden which hides the element but keeps its space. With display: none, the element is gone.