Web · Box Model and Spacing
Spacing Between Elements
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to Spacing in CSS
The Box Model is a crucial concept in CSS that describes the rectangular boxes generated for elements in the document tree and how their dimensions are calculated.
We already talked about margin and padding
If you remember correctly, we already talked about margin and padding in introduction to css. This is a gentle reminder + we apply them to box model.
To control the space between elements, CSS provides two main properties: margin and padding.
These properties are part of the CSS Box Model, which defines how elements are rendered on the page:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
/* Let's add some spacing */
margin: 20px;
padding: 15px;
}
body {
background-color: #00ff00;
}
</style>
</head>
<body>
<div class="box">This element has margin and padding</div>
</body>
</html>
In this example, you can see:
- margin creates space outside the element (the green area around the blue box)
- padding creates space inside the element (between the content and the border)
Exercise 2 — Understanding Margin
Margin creates space around an element, separating it from other elements. It's essentially invisible space outside the element's border.
You can set margin on all four sides at once or on individual sides:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
}
.box {
width: 100px;
height: 50px;
background-color: lightblue;
border: 2px solid blue;
}
.margin-all {
/* Equal margin on all sides */
margin: 20px;
}
.margin-individual {
/* Different margins for each side */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box margin-all">Margin: 20px on all sides</div>
<div class="box margin-individual">Different margins on each side</div>
</div>
</body>
</html>
The
margin
property can be set using different units:
-
px
(pixels): Fixed measurement
-
%
(percentage): Relative to the parent element's width
-
em
: Relative to the element's font size
-
rem
: Relative to the root element's font size
Margin Shorthand
The margin property has a shorthand notation:
-
margin: 10px;
- All sides 10px
-
margin: 10px 20px;
- Top/bottom 10px, left/right 20px
-
margin: 10px 20px 30px;
- Top 10px, left/right 20px, bottom 30px
-
margin: 10px 20px 30px 40px;
- Top 10px, right 20px, bottom 30px, left 40px (clockwise)
Exercise 3 — Understanding Padding
Padding creates space inside an element, between its content and its border. Unlike margin, padding is included in the element's background.
Like margin, you can set padding on all sides or individual sides:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
background-color: lightblue;
border: 2px solid blue;
margin: 20px;
}
.padding-all {
/* Equal padding on all sides */
padding: 20px;
}
.padding-individual {
/* Different padding for each side */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
</style>
</head>
<body>
<div class="box padding-all">This box has 20px padding on all sides. Notice how the text stays away from the border.</div>
<div class="box padding-individual">This box has different padding on each side. More space on the left, less on the top.</div>
</body>
</html>
Important things to know about padding:
- Padding adds to the element's total size (unless
box-sizing: border-box
is set)
- Padding always has the same background color as the element
- Padding cannot be negative (unlike margin)
Padding Shorthand
The padding property has the same shorthand notation as margin:
-
padding: 10px;
- All sides 10px
-
padding: 10px 20px;
- Top/bottom 10px, left/right 20px
-
padding: 10px 20px 30px;
- Top 10px, left/right 20px, bottom 30px
-
padding: 10px 20px 30px 40px;
- Top 10px, right 20px, bottom 30px, left 40px (clockwise)
Exercise 4 — Margin vs. Padding
Which CSS property would you use to create space between an element's border and the content inside it?
Options
• ```padding```
• ```margin```
• ```border-spacing```
• ```inner-space```
Hint : Think about whether you need space inside the element or outside the element.
Exercise 5 — Shorthand Notation for Spacing
Both
margin
and
padding
properties support shorthand notation, which allows you to set multiple sides at once.
The shorthand follows a specific order: top, right, bottom, left (clockwise from the top).
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
border: 2px solid blue;
width: 200px;
margin-bottom: 20px;
}
/* One value: all sides the same */
.box-1 {
padding: 20px;
}
/* Two values: top/bottom, left/right */
.box-2 {
padding: 10px 30px;
}
/* Three values: top, left/right, bottom */
.box-3 {
padding: 5px 20px 40px;
}
/* Four values: top, right, bottom, left (TRBL) */
.box-4 {
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box box-1">One value: padding: 20px;</div>
<div class="box box-2">Two values: padding: 10px 30px;</div>
<div class="box box-3">Three values: padding: 5px 20px 40px;</div>
<div class="box box-4">Four values: padding: 10px 20px 30px 40px;</div>
</body>
</html>
The same shorthand patterns work for
margin
as well. Here's a quick guide:
-
margin: 10px;
→ All sides: 10px
-
margin: 10px 20px;
→ Top/bottom: 10px, Left/right: 20px
-
margin: 10px 20px 30px;
→ Top: 10px, Left/right: 20px, Bottom: 30px
-
margin: 10px 20px 30px 40px;
→ Top: 10px, Right: 20px, Bottom: 30px, Left: 40px
Exercise 6 — Complete the Shorthand
Complete the CSS to create a button with 10px padding on top and bottom, 20px padding on left and right, and 15px margin on all sides.
.button {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
padding: ____ ____;
margin: ____;
}
Options: 10px 20px 15px 5px 30px
Hint : Remember the shorthand pattern for padding and margin. For padding with two values, the first is top/bottom and the second is left/right.
Exercise 7 — Centering with Margin Auto
One common use of margins is to center elements horizontally. Setting
margin-left
and
margin-right
to
auto
tells the browser to automatically calculate equal margins on both sides, which centers the element.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
padding: 20px;
}
.centered {
/* This centers the box horizontally */
margin-left: auto;
margin-right: auto;
}
/* Shorthand for the same thing */
.centered-shorthand {
margin: 20px auto; /* 20px top/bottom, auto left/right */
}
</style>
</head>
<body>
<div class="box">This box is not centered</div>
<br>
<div class="box centered">This box is centered</div>
<br>
<div class="box centered-shorthand">This box is centered with shorthand</div>
</body>
</html>
Important notes about centering with
margin: auto
:
- It only works for block elements (like div, p, h1, etc.)
- The element must have a specified width (otherwise it would be 100% wide by default)
- It only centers horizontally, not vertically
Exercise 8 — Understanding Margin Shorthand
What does the following CSS declaration do?
margin: 10px 20px 30px;
Options
• Sets top margin to 10px, left and right margins to 20px, bottom margin to 30px
• Sets top margin to 10px, right margin to 20px, bottom and left margins to 30px
• Sets left margin to 10px, top and bottom margins to 20px, right margin to 30px
• Sets all margins to 10px, then 20px, then 30px in succession
Hint : Remember the shorthand pattern for margin with three values: first value is top, second is left and right, third is bottom.
Exercise 9 — Matching Spacing Properties
Match each CSS property with its correct description:
Items to match
• margin
• padding
• margin: 0 auto;
• padding: 10px 20px;
Definitions
• Space outside an element's border
• Space between content and border
• Centers an element horizontally
• 10px top/bottom padding, 20px left/right padding
Exercise 10 — Create a Card Layout
Complete the CSS to create a card with appropriate spacing. The card needs:
- 20px of space between content and border (inside)
- 15px of space between cards (outside)
- The card should be centered on the page
.card {
width: 300px;
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
____ ____;
____ ____;
}
Options: padding: margin: 20px 15px auto 0 15px auto
Hint : Think about which property controls space inside the element and which controls space outside. Also remember how to center an element horizontally.