Lesson 7 – CSS3 Paddings And Margins

CSS3 allows you to add paddings and margins around an element or a box. We will discuss these two concepts one by one in the following lines.

CSS3 Paddings

You can specify the space that appears between the border of an element and its content. Point to remember here is that padding specifies the space inside the box not outside.

The value of padding property can only be inherit, a percentage or an integer. The percentage is always relative to the padding of the containing box whereas the padding will be same as the parent element if you use inherit as a value.

It is possible to apply padding to all four sides of the element, to three sides, to two sides or to one side only. The example below explains how it is done.

Here is how you add padding to all four sides of a box or element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Paddings</title>
    <style>
        p {
            width: 30%;
            border: 1px solid red;
        }

        .padding {
            padding: 5px 10px 15px 20px;
        }
    </style>
</head>
<body>
    <p>
        Paragraph Without Padding
    </p>
    <p class="padding">
        Paragraph With Padding On All Four Sides
    </p>
</body>
</html>

In the above example, the values are in the order of top padding, right padding, bottom padding and left padding.

The final output of the above example will be as follows.

Padding Bottom

Here is how you apply padding only to element’s bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Paddings</title>
    <style>
        p {
            width: 30%;
            border: 1px solid red;
            padding-bottom: 20px;
        }

    </style>
</head>
<body>
    <p>
        Paragraph With Padding on Bottom Only.
    </p>
</body>
</html>

Here is the final output.

Padding Top

Here is how you apply padding to top of the element only.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Paddings</title>
    <style>
        p {
            width: 30%;
            border: 1px solid red;
            padding-top: 20px;
        }

    </style>
</head>
<body>
    <p>
        Paragraph With Padding on right Only.
    </p>
</body>
</html>

The browser will produce the following result.

Padding Left

Here is how you apply padding to the left only.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Paddings</title>
    <style>
        p {
            width: 30%;
            border: 1px solid red;
            padding-left: 20px;
        }

    </style>
</head>
<body>
    <p>
        Paragraph With Padding on left Only.
    </p>
</body>
</html>

This will be the result of the above style rules.

Padding Right

Here is you apply padding to the right of the element only.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Paddings</title>
    <style>
        p {
            width: 30%;
            border: 1px solid red;
            padding-right: 20px;
        }

    </style>
</head>
<body>
    <p>
        Paragraph With Padding to Right Only.
    </p>
</body>
</html>

Now the paragraph has padding on its right only as shown in the figure.

CSS3 Margins

You can specify the space that appears between two elements or around an element in the HTML5 document using CSS3 margin property.

It is possible to apply a margin to all four sides of the element, to three sides, to two sides or to one side only. The example below explains how it is done.

This is how we apply margins to all four sides of the box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Margins</title>
    <style>
        p {
            width: 30%;
            border: 1px solid red;
		margin: 5px 10px 15px 20px;
        }

        .padding {
            margin: 5px 10px 15px 20px;
        }
    </style>
</head>
<body>
    
Division One
Division Two
</body> </html>

In the above example, the values are in the order of top margin, right margin, bottom margin and left margin.

The final output of the above example will be as follows.

Margin Bottom

Here is how you apply margin only to element’s bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Margins</title>
    <style>
        .div1 {
            width: 30%;
            border: 1px solid red;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    
Division With margin on bottom only.
Division Two
</body> </html>

Here is how the browser will render the code.

Margin Top

Here is how you apply margin to top of the element only.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Margins</title>
    <style>
        .div1 {
            width: 30%;
            border: 1px solid red;
        }

        .div2 {
            width: 30%;
            border: 1px solid red;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    
Division 1
Division With margin on bottom only.
</body> </html>

The style rules will look like this in the browser.

Margin Left

Here is how you apply margin to the left only.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Paddings</title>
    <style>
        img {
            width: 300px;
            height: 300px;
        }

        .img {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <img src="aircraft.jpg" alt="" class="img">>
    <img src="aircraft-2.jpg" alt="">
</body>
</html>

This is what you will get in the browser.

Margin Right

Here is you apply margin to the right only.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Paddings</title>
    <style>
        img {
            width: 300px;
            height: 300px;
        }

        .img {
            margin-right: 20px;
        }

    </style>
</head>
<body>
    <img src="aircraft.jpg" alt="" class="img">
    <img src="aircraft-2.jpg" alt="" >
</body>
</html>

Here is the final output.

In the next chapter, we will discuss CSS3 Positioning