Module 9: A Touch of CSS · Lesson 5 of 6
CSS Box Model Explained: Padding, Border and Margin
All lessons in Module 9
Goal: Control an element's size and spacing with width, padding, border and margin.
Learn
CSS sees every element as a rectangle. That idea is the box model, and the CSS box model article (opens in a new tab) on Wikipedia has a good diagram of it. Picture a framed photo on a wall:
- The content is the photo itself, and
widthsets how wide it is. paddingis the mat around the photo, the space inside the border. The background color fills it.borderis the frame. Give it a width, a style and a color:border: 2px solid navy;. Leave out a style likesolidordashedand no border appears.marginis the bare wall around the frame, space outside that pushes other elements away.
One more trick. On a block with a fixed width, margin: 20px auto; means 20px above and below and equal automatic space left and right, so the block ends up centered.
The short version
- By default
widthcovers only the content. 300px wide plus 16px padding and a 2px border on each side gives a 336px box. box-sizing: border-boxmakeswidthinclude padding and border, and that is far easier to plan with.- Shorthands run clockwise:
margin: 10px 20px 30px 40pxis top, right, bottom, left. Two values mean top/bottom and left/right. - Vertical margins between blocks collapse. Two 20px margins that meet leave a 20px gap, and you might expect 40px.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Box Model</title>
<style>
.note {
width: 250px;
padding: 16px;
border: 3px dashed orange;
margin: 20px auto;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="note">Remember: padding inside, margin outside.</div>
</body>
</html>Your task
The Summit Climbing Gym text should look like a proper membership card. In the .card rule:
- Set a
width(try300px). - Add
paddingso the text does not touch the edges. - Add a
borderwith a width, a style and a color, like2px solid #333. - Add a
marginto give it space outside, for example20px autoto center it.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
.card {
width: 100%;
padding: 20px;
}Right
.card {
box-sizing: border-box;
width: 100%;
padding: 20px;
}Without border-box the padding comes on top of the 100%, and the card pokes 40px out of its container.
Wrong
.card {
margin: 20px auto;
}Right
.card {
max-width: 300px;
margin: 20px auto;
}A block with no width already fills the line, so the auto margins have no spare space to share and nothing moves to the center.
Go deeper
Every browser can show you the box model live. Open DevTools, select an element and find the box diagram in the Computed or Layout panel. It draws content, padding, border and margin as nested colored rectangles with their exact sizes, and hovering an element on the page highlights each layer. To play with borders, rounded corners and shadows, try the generators on HTML-CSS-JS (opens in a new tab), which write the CSS while you watch the preview.
Many stylesheets open with one rule that switches every element to the friendlier sizing: *, *::before, *::after { box-sizing: border-box; }. From then on, the width you write is the width you get. The W3C CSS Basic User Interface (opens in a new tab) spec defines the property.
On layouts that have to work on phones, use max-width in place of width. A card with max-width: 300px is 300px on a laptop and shrinks to fit a narrow screen. With width: 300px it can spill over the edge.
Inline elements such as <a> and <span> follow different rules. The browser ignores their width and height, and vertical padding and margin don't push the surrounding lines apart. display: inline-block gives them full box behavior and keeps them in the line of text. The lesson on div and span explains block and inline elements.
When spacing looks wrong, add outline: 1px solid red; to the suspects for a minute. Outlines take up no space, so you see the boxes and the layout stays put.
Frequently asked questions
What is the difference between margin and padding in CSS?
Padding is the space inside the border, between the border and the content, and the element's background color fills it. Margin is the space outside the border. It pushes other elements away and is always transparent. Use padding to give content room to breathe inside a box, and margin to keep the box apart from its neighbors.
What does box-sizing: border-box do?
It changes what width and height measure. With the default content-box they size the content only, and padding and border come on top. With border-box they size the whole box, padding and border included, so a width: 300px card is exactly 300px wide on screen. Many developers switch every element to it at the top of their stylesheet.
How do I center a div horizontally?
Give the block a width (a max-width is even better) smaller than its container, and set its left and right margins to auto: margin: 0 auto;. The browser splits the leftover space equally between the two sides. This centers the box itself. To center the text inside it, use text-align: center, as in the lesson on the style attribute.