A block-level element appears on its own line in normal document flow and normally fills the available width of its container. Unlike an inline element, it has a line break above and below it—even if you reduce its width. Paragraphs, divs, and headers get this behavior from the browser’s default stylesheet. section 3.1
Width and height behave differently in this flow. A parent’s width constrains its children, whose contents wrap as needed; the children’s heights, in turn, determine the parent’s height. This is why a full-width block does not need a fixed height to contain several lines of text. section 3.1
Turn links into stacked buttons
Set `.button-link { display: block; }` to put each link on its own line and make it fill its container. For spacing, `.button-link + .button-link { margin-block-start: 1.5em; }` adds a margin only between adjacent buttons. Giving every button a top margin would also add unwanted space beside the container’s top padding. section 3.6
Check the element you are styling before relying on automatic width. A form input set to `display: block` appears on its own line, but its width is still influenced by its `size` attribute. Set `inline-size: 100%` when it needs to fill the available width. section 4.3.2
Listing 3.13 Using an adjacent sibling combinator to apply a margin between buttons
.button-link {
display: block;
padding: 0.5em;
color: #fff;
background-color: var(--brand-color);
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.button-link + .button-link { #1
margin-block-start: 1.5em; #1
} #1
The listing shows block-level links and an adjacent-sibling rule that spaces the links without adding a margin before the first one. section 3.6
