Before you can lay things out, you need to control size and flow. Two ideas do most of the work: the width/height properties, and the all-important display property.
Width and height
Set size with <code>width</code> and <code>height</code>, in pixels or percentages. The most useful one is <code>max-width</code>: it lets an element shrink on small screens but never grow beyond a limit — essential for responsive design.
<div class="box">max-width keeps me readable</div>.box{max-width:300px;background:#dbeafe;padding:16px}The display property
Every element has a default display. Block elements (like div, p, h1) stack vertically and take full width. Inline elements (like span, a) flow within text and ignore width/height. inline-block flows inline but accepts size. display: none removes an element entirely.
| display | Behaviour |
|---|---|
| block | Full width, stacks vertically |
| inline | Flows in text, ignores width/height |
| inline-block | Flows inline but accepts size |
| none | Removed from the page |
<span class="chip">One</span>
<span class="chip">Two</span>.chip{display:inline-block;background:#2563eb;color:#fff;padding:6px 12px;border-radius:8px;margin:3px}span { width: 100px; } /* ignored */span { display: inline-block; width: 100px; }Trying to set width or height on a plain inline element does nothing. Switch it to inline-block or block first.
Prefer max-width over fixed width for containers, so content stays readable and responsive without extra media queries.
Make three inline-block chips that sit in a row with padding and rounded corners. Then give a container a max-width of 400px and centre it.
1. Which display takes full width and stacks?
2. Which lets an element flow inline but accept width/height?
3. Which property caps size but allows shrinking?
- width/height set size; max-width is key for responsive containers.
- display controls flow: block, inline, inline-block, none.
- Inline elements ignore width/height — use inline-block.
- Prefer max-width over fixed width.