The display property tells the browser how an element joins the layout. Think of it as choosing whether an item behaves like a full-width block, a friendly inline block, or a grid container. section 9.2 section 13.10
Use the value that matches the layout job:
- display: block makes an element a true block-level element. section 9.2
- display: inline-block keeps an element flowing inline while allowing width, height, and other block-related properties. section 9.2
- display: grid converts a block element into a grid container for arranging columns, rows, gaps, and named areas. section 13.10
A horizontal navigation menu
Set the list items to display: inline-block when you want navigation links to sit side by side while still accepting padding. Padding then adds breathing room so the links do not huddle together like nervous penguins. section 9.3
ul {
list-style-type: none;
text-transform: uppercase;
}
li {
display: inline-block;
padding-right: 1em; #1
}
See the complete navigation rule using display: inline-block alongside list cleanup and spacing. section 9.3
