Boxes: space, size and overflow
Every element is a box. Padding, border and margin, why 100% width can overflow, how block and inline differ, and what to do when content is too big for its box.
By the end you can
- Tell padding, border and margin apart, and use the right one
- Stop boxes from overflowing when you add padding
- Know why some elements take a whole line and others do not
- Handle content that is bigger than the box holding it
Easier if you did first
step 1 of 4
Padding, border and margin
Every element on a page is a rectangle, even when it does not look like one. Around its content sit three layers.
Picture a framed photograph on a wall. The photo is the content. The white mount around it, inside the frame, is the padding. The frame itself is the border. The gap between this frame and the next one on the wall is the margin.
So: padding is space inside, and it takes the background colour with it. Margin is space outside, and it is always see-through.
This is the most common confusion in all of CSS, and the test is simple. Do you want the box itself to get bigger, with more room around the words? That is padding. Do you want the box pushed away from its neighbours? That is margin.
Both can be written in shorthand. padding: 16px is all four sides. padding: 16px 24px is top and bottom, then left and right. padding: 8px 16px 24px 32px goes clockwise from the top.
One oddity worth knowing now: when two margins meet vertically, they do not add up. A 20px bottom margin above a 30px top margin gives you 30px, not 50. This is called margin collapse, and it catches everyone at least once.
Give the card on the right room to breathe, a border, and space between the two cards.
.card {
padding: 24px; space inside, takes the background
border: 1px solid #d7e5dd; the frame
margin-bottom: 16px; space outside, always see-through
}
padding: 16px; all four sides
padding: 16px 24px; up and down, then left and right
padding: 8px 16px 24px 32px; top, right, bottom, leftWhat these words mean
- content
- The words or picture itself.
- padding
- Space inside the box. It takes the background colour.
- border
- A line around the padding. Width, style and colour.
- margin
- Space outside the box. Always see-through.
- shorthand
- One property setting several sides at once.
- margin collapse
- Two vertical margins that meet become the larger one, not the sum.
Easy to get wrong
Using margin to stop text touching the edge of a card
padding
Margin pushes the whole card away from its neighbours and leaves the text still jammed against the inside of the box. Padding is the one that makes room inside.
Expecting 20px and 30px of margin to make 50px
Expect 30px, or use padding or a gap instead
Vertical margins collapse into the larger of the two. If you need space you can predict, put a gap on the container instead, which never collapses.
What we check
- The card has padding inside it
- The card has a border
- There is space between the two cards
- The padding is enough to actually see