Every element is a box
Every element on a web page is drawn as a rectangular box. The CSS box model describes the layers of that box: content, padding, border and margin. Once you can work out how much room a box takes, you can place boxes in a row or a grid with flexbox and grid.
In this lesson you will lay a page out with all three.
By the end of this lesson
Note
I can lay out a page with the box model, flexbox and grid.
Key words
| Word | What it means |
|---|---|
| Box model | the layers around every element |
| Padding | space between the content and the border |
| Margin | space outside the border, between boxes |
| Flexbox | a layout that lines items up in one row or column |
| Grid | a layout of rows and columns |
The cells students fill in are left blank in this preview.
A box has four layers
From the inside out, a box has four layers. The content is the text or picture. Padding is space around the content. The border is the line around the padding. Margin is empty space outside the border.
Background colour fills the content and the padding, but never the margin.
Try it: see the layers
<p class="box">Content of the box</p>
<p class="box">A second box</p>The width you set may differ
By default, width is the width of the content only. Padding and border are added outside it. This is box-sizing: content-box.
With box-sizing: border-box, the width includes the padding and the border, so the box is as wide as you wrote. Margin is never part of the width, but it takes space beside the box.
Worked example: the space one box takes
| Step | content-box | border-box |
|---|---|---|
| width set to | 200 | 200 |
| padding 10 on each side adds | 20 | already inside |
| border 2 on each side adds | 4 | already inside |
| width of the box itself | 224 | 200 |
| margin 5 on each side adds | 10 | 10 |
| horizontal space taken | 234 | 210 |
The cells students fill in are left blank in this preview.
Read the rules of the lab page
docker exec jupyter python3 steps/css.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The lab page cards are boxes
In the output, find the line 4 declarations in .dish. That rule gives each dish its padding, its bottom margin, its border and its rounded corners.
The summary line says the most used property is padding, six times. Almost every part of the page is a box with space inside it.
A common mistake
Warning
Many people think width: 200px means the box is 200 pixels wide on the screen. With the default setting it is wider, because padding and border are added. Add box-sizing: border-box if you want the width to be the whole box.
Flexbox lines items up in a row
Flexbox lays the children of one element along a line. Set display: flex on the parent. The children then sit in a row.
gap puts space between them. justify-content spreads them along the row. flex-direction: column turns the row into a column.
Try it: spread three links
<nav class="bar">
<a href="#a">Books</a>
<a href="#b">Rooms</a>
<a href="#c">Help</a>
</nav>Grid builds rows and columns
Grid lays items out in rows and columns at once. Set display: grid on the parent and say the columns with grid-template-columns.
The value repeat(3, 1fr) makes three columns of equal width. The unit fr is a share of the free space. Use flexbox for one line of items and grid for a page of cards.
Try it: a grid of six cards
<div class="cards">
<div>One</div><div>Two</div><div>Three</div>
<div>Four</div><div>Five</div><div>Six</div>
</div>