Lesson 5 of 5 · 15–25 minutes

Spacing and borders

🏠The everyday picture

A well-laid-out notice board: space between notices, a margin round the edge, a frame around the important one. Without space, even good content looks cluttered.

📘What it really is

Padding is space inside an element, between its content and its edge.
Margin is space outside it, pushing other elements away.
Border is the line between padding and margin: border: 1px solid #ccc;.
border-radius rounds the corners: border-radius: 8px;.
Values can be set for each side: padding: 10px 20px; means 10px top and bottom, 20px left and right.
Consistent spacing makes a site look designed. Pick a scale, like 4, 8, 16, 24, 32 and 48 pixels (or 0.25 to 3rem), and stick to it.
box-shadow adds a soft shadow: box-shadow: 0 2px 8px rgb(0 0 0 / 10%);. Keep it subtle.
Module 15 explains exactly how padding, border and margin add up (the box model).

🖱️Try it

Style your contact form: give each field padding: 0.5rem, a border, rounded corners and a margin below it. Make the submit button stand out with your main colour, white text, padding and rounded corners. Add a :focus style so keyboard users can see which field is selected.

✅Quick check

You want more space between the text and the edge of a button. Padding or margin?

Show the answer

Padding, which is the space inside the element.

Why should a focused field look different?

Show the answer

So keyboard users can see where they are on the page.