Reference · module 6
Layout
Everything this module explains, on one page.
Block and inline
Tell block from inline elements and change it.
- Block elements like p, h1, div and ul start on a new line and stretch across the full width. Inline elements like a, strong and span sit inside a line of text.
- Width and vertical margin do not apply to inline elements. display: inline-block keeps an element in the line but lets it take width, height and padding.
- display: none removes an element from the page completely, as if it were not in the HTML. It takes no space and screen readers skip it too.
The mistake you are about to make
a { width: 200px; } → wider link
a { display: inline-block; width: 200px; }
Every element seems to accept a width. Inline elements ignore it; make the link inline-block or block first.
Flexbox
Line up items in a row and space them with flexbox.
- display: flex on a parent lines its children up in a row. The children become flex items and no longer start on new lines, even if they are blocks.
- justify-content spaces items along the row: flex-start, center, flex-end, or space-between to push the first and last to the edges.
- align-items aligns them across the row, for example center for vertical centring. gap: 16px puts space between items without margins on each one.
The mistake you are about to make
li { display: flex; } to put items in a row
ul { display: flex; }
The items are what should move, so flex seems to go on them. display: flex arranges an element's children, so it goes on the parent.
Screens of every size
Adapt a layout to phones with media queries.
- Phones pretend to be wide desktop screens unless told otherwise. <meta name="viewport" content="width=device-width, initial-scale=1"> in the head tells them to use their real width.
- A media query applies rules only when a condition holds: @media (min-width: 768px) { .menu { display: flex; } } — the menu becomes a row only on screens at least 768px wide.
- Mobile first means writing the phone layout as the default and adding min-width queries for bigger screens. The simplest layout then works everywhere without any query.
The mistake you are about to make
@media (min-width: 768px) for phone styles
@media (max-width: 767px) or mobile-first defaults
min sounds like small, so min-width seems to target small screens. min-width: 768px means at least 768px wide — tablets and desktops.