Boxes and sizing · Lesson 5 of 17
Padding, border and margin
Every element is a box, and how to control its spacing.
8 minutes3 games
Every element is a box with 4 layers, inside out:
- content: the content itself.
- padding: space inside the box around the content.
- border: the frame.
- margin: space outside the box, between it and its neighbours.
HTML
<style>
.card {
padding: 16px;
border: 3px solid #0ea5e9;
margin: 20px;
border-radius: 12px;
background: #f0f9ff;
}
</style>
<div class="card">Padding inside, margin outside.</div>
<div class="card">Another card</div>margin
padding
content
width on screen = 120 + 2×16 + 2×6 = 164px
(margin adds space outside, not width)
Quick question
You want space between a button's text and its border. Which property?
What's the output?
.box {
box-sizing: content-box;
width: 100px;
padding: 10px;
border: 5px solid;
}What will this code print?
Exercise
Give .box 24px padding and a 2px solid border.
HTML
<style>
.box {
}
</style>
<div class="box">Box</div>
Learn more from
Played 0 of 3 games
Sign in to save your progress and earn XP.