H6 - Padding, Margin and Border

01 - The box model

Every visible HTML element can be seen as a rectangular box. CSS calls this the box model.

Content: the text or image itself.
Padding: space inside the element.
Border: the line around the padding and content.
Margin: space outside the element.

article {
    padding: 20px;
    border: 2px solid black;
    margin: 24px;
}

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

02 - CSS units

px is a fixed pixel value.
% is relative to the parent or available space.
em is relative to the font size of the element.
rem is relative to the root font size.
fr is used in CSS Grid to divide available space into fractions.

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

03 - Padding: space on the inside

Padding creates space between the content and the border.

p {
    padding: 16px;
}

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

04 - Margin: space on the outside

Margin creates space between one element and other elements.

h2 {
    margin-bottom: 20px;
}

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

05 - Border: the edge of an element

A border needs a width, style and color.

section {
    border: 2px solid black;
}

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

06 - Setting four sides

You can target one side at a time.

div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

07 - Shorthand: writing less

Shorthand lets you write several sides in one line.

div {
    padding: 10px 20px;
    margin: 24px auto;
}

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

08 - Width and box-sizing

By default, width only controls the content box. With box-sizing: border-box, padding and border are included in the width. This is easier for layout work.

* {
    box-sizing: border-box;
}

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

09 - Centering a block with margin auto

A block with a set width can be centered with left and right margin set to auto.

main {
    max-width: 900px;
    margin: 0 auto;
}

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

10 - Margin collapse

Vertical margins can sometimes collapse into one margin. This happens mostly between block elements. If spacing looks smaller than expected, margin collapse may be the reason.

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

11 - Practical example

article {
    max-width: 700px;
    margin: 32px auto;
    padding: 24px;
    border: 2px solid lightgray;
    border-radius: 8px;
}

Practice

Give an element padding, margin or a border, then change one value.
Use the browser to see where the space appears inside and outside the element.

12 - Assignment

Practice

Create a page with a heading, text and two content blocks.
Add padding inside each block.
Add margin between the blocks.
Add a border and a small border radius.
Center the main container with margin: 0 auto;.

Quiz