IT Course CSS Basics 025_Margins and Padding

Margins

In CSS, margins and padding are two different concepts, both used to control the space between elements and affect page layout.

Example effect

Margin (Outer Spacing)

Margin refers to the space between an element and its adjacent elements. Margins can be used to control the distance between elements and affect page layout. Margins have no background color, are completely transparent, and do not affect the actual size of elements. They can be positive or negative values, with units such as pixels (px), percentages (%), em, etc.

Example:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        margin: 10%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        margin: -50px 50px;
11
        background-color: green;
12
    }
13
    .example3 {
14
        margin: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Effect: Example effect You can use margin-top, margin-right, margin-bottom, margin-left to set the margin for a specific direction individually.

Example:

1
    .example1 {
2
        margin-top: 100px;
3
        margin-right: 50px;
4
        margin-bottom: 80px;
5
        margin-left: 50px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1"></div>

Effect:

Example effect

Padding (Inner Spacing)

Padding refers to the space between an element’s internal content and its border. Padding can be used to adjust the distance between the element’s internal content and its border, affecting the element’s dimensions and layout. Padding inherits the element’s background color and affects the actual size of the element. Negative values are not supported, with units such as pixels (px), percentages (%), em, etc.

Example:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        padding: 3%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        padding: 10px 50px ;
11
        background-color: green;
12
    }
13
    .example3 {
14
        padding: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1">padding test</div>
2
    <br>
3
    <div class="base example2">padding test</div>
4
    <br>
5
    <div class="base example3">padding test</div>

Effect:

Example effect You can use padding-top, padding-right, padding-bottom, padding-left to set the padding for a specific direction individually.

Example:

1
    .example1 {
2
        padding-top: 20px;
3
        padding-right: 50px;
4
        padding-bottom: 80px;
5
        padding-left: 10px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1">padding test</div>

Effect: Example effect

Margins

Margin (Outer Spacing)

Padding (Inner Spacing)

Comments