Mastering CSS Margin and Padding Property with example

Hi, developer! In this article, we understand the properties of CSS, like margin and padding. Understanding this is necessary for us to create any layout well. In this, we have explained it using simple examples, which will make it easier for you to understand.

So let's start.

CSS Margin

The CSS margin property is used to create space around elements. With margins, you can control the spacing between text, images, and other elements on your webpage. Margins can be applied uniformly on all sides or individually adjusted for the top, right, bottom, and left sides, offering flexibility in layout design.

margin-top: Defines the top margin of an element.
margin-right: Defines the right margin of an element.
margin-bottom: Defines the bottom margin of an element.
margin-left: Defines the left margin of an element.

Margin size can be specified in units such as pixels (px), percentages (%), centimeters (cm), inches (in), and more.

Setting the margin value to "auto" will automatically adjust the margin size to maintain equal spacing.

Negative values can also be applied to margins using a minus sign, as the margin property allows for negative values.

Syntax:

margin: size;

If the margin property has four values, they will be applied to the top, right, bottom, and left margins, respectively.

margin: 50px 10px 100px 50px;

margin-top = 50px ;
margin-right = 10px;
margin-bottom = 100px;
margin-left = 50px;

When you define margins for all four sides of an element using CSS, you can think of it as starting at the top and moving clockwise around the element, just like the hands of a clock. This sequence corresponds to specifying the values for the top, right, bottom, and left margins, respectively. It's a helpful analogy to remember when setting margins in your CSS code.

<head>
    <style>
        h1 {
            margin: 50px 10px 100px 50px;
        }
    </style>
</head>

<body>
    <h1>The margin four value</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, deleniti!</p>
</body>

If the margin property has three values, then the margin will be set to something like this.

margin: 10px 20px 50px;

margin-top = 10px ;
margin-right and margin-left = 20px;
margin-bottom = 50px;

If the margin property has two values, then the margin will be set to something like this.

margin: 100px 200px;

margin-top and margin-bottom = 100px ;
margin-right and margin-left = 200px;

If the margin property has one value, then the margin will be set to something like this.

margin: 230px;

margin-top, margin-right, margin-bottom, margin-left = 230px.

This gives the same 230px value around the h1 tag. We had understood the previous example of a clock, so this is how it works: (top, right, bottom, and left) 230px will evenly space around the element.

Margin individual property example

<head>
    <style>
        .top {
            background-color: thistle;
            margin-top: 100px;
        }

        .right {
            background-color: thistle;
            margin-right: 100px;
        }

        .bottom {
            background-color: thistle;
            margin-bottom: 100px;
        }

        .left {
            background-color: thistle;
            margin-left: 150px;
        }
    </style>
</head>

<body>
    <h2 class="top">The margin top</h2>
    <h2 class="right">The margin right</h2>
    <h2 class="bottom">The margin bottom</h2>
    <h2 class="left">The margin left</h2>
</body>

Margin auto value example

<head>
    <style>
        div {
            height: 200px;
            width: 300px;
            background-color: thistle;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div>
        <h1>The auto value</h1>
    </div>
</body>

Margin negative value example

In this example, the first text will move to the left side because we put the value on the left side as negative. And its text of positive value will appear.

<head>
    <style>
        .n-value {
            height: 200px;
            margin-left: -3%;
            margin-top: -15px;
            background: thistle;
        }

        .p-value {
            height: 200px;
            background: thistle;
        }
    </style>
</head>

<body>
    <h1 class="n-value">The margin negative value</h1>
    <h1 class="p-value">The margin positive value</h1>
</body>

CSS Padding

CSS padding

CSS padding adds space between an element's content and it's border. It can be set for each side individually (top, right, bottom, left).

padding-top: Defines the top padding of an element.
padding-right: Defines the right padding of an element.
padding-bottom: Defines the bottom padding of an element.
padding-left: Defines the left padding of an element.

You can give the padding size in pixels (px), percentages (%), centimeters (cm), inches (in), and more.

Syntax

{ padding: size; }

If the padding property has four values, then the padding will be set to something like this.

padding: 20px 0px 20px 50px;

padding-top = 20px ;
padding-right = 0px;
padding-bottom = 20px;
padding-left = 50px;

<head>
    <style>
        h1 {
            padding: 20px 0px 20px 50px;
            border: 1px solid steelblue;
        }
    </style>
</head>

<body>
    <h1>The padding four value</h1>
    <p>Lorem ipsum dolor sit amet consenter adipisicing elit. Laudantium, deleniti!</p>
</body>

If the padding property has three values, then the padding will be set to something like this.

padding: 20px 100px 50px;

padding-top = 20px ;
padding-right and padding-left = 100px;
padding-bottom = 50px;

If the padding property has two values, then the padding will be set to something like this.

padding: 50px 200px;

margin-top and margin-bottom = 100px ;
margin-right and margin-left = 200px;

If the padding property has one value, then the padding will be set to something like this.

padding: 100px;

padding-top, padding-right, padding-bottom, padding-left = 100px.

This gives the same 100px value around the h1 tag. We had previously understood the example of a clock, so this is how it works (top, right, bottom, and left) 100px will evenly space around the element.

Padding all sides as an individual example

<head>
    <style>
        .top {
            background-color: thistle;
            padding-top: 100px;
        }

        .right {
            background-color: thistle;
            padding-right: 100px;
        }

        .bottom {
            background-color: thistle;
            padding-bottom: 100px;
        }

        .left {
            background-color: thistle;
            padding-left: 150px;
        }
    </style>
</head>

<body>
    <h1 class="top">The Padding top</h1>
    <h1 class="right">The padding right</h1>
    <h1 class="bottom">The padding bottom</h1>
    <h1 class="left">The padding left</h1>
</body>

The difference between margin and padding

Margin: It creates space around an element, like the area around a picture frame. You can adjust how much space there is between an element and its surroundings.

Padding: This is the space inside an element, like the space inside a picture frame. You can control how much space there is between an element's content and its border.

Margin can be set to auto: You can let the browser automatically adjust the margin of an element.

A negative margin is possible: You can set a negative value for the margin, pulling an element closer to other elements.

Padding cannot be set to auto or negative: Padding doesn't have the flexibility of auto or negative values. It's always positive, creating space within the element.

Look at the example of margin and padding.

<head>
    <style>
        .margin-box {
            background-color: thistle;
            width: 20%;
            margin: 20px;
            height: 10vh;
        }

        .padding-box {
            height: 10vh;
            padding: 20px;
            background-color: thistle;
            width: 20%;
        }
    </style>
</head>

<body>
    <div class="margin-box"> The margin example </div>
    <div class="padding-box"> The padding example </div>
</body>

How to Remove the Browser's Default Margin and Padding

When you create a web project, most browsers set the default margin and padding for the entire page. If you want to remove this margin and padding from that page, first write it in your CSS file.

* {
    margin: 0;
    padding: 0;
}

With a set margin of 0

Without a set margin of 0

How to view and change the margin and padding of any element in the browser

By staying in the browser, you can find the margin and padding of any element.

To do this, open your browser (that browser in which your project is open) and right-click on the project page, then select Inspect. On the top left, there will be an option for an element inside Inspect, click on that, and your project file will appear. You can see the style of any element in the file by clicking on it. There will be a box on its side, if you don't see the box, do a right-side scroll down, and hovering over it will show you the selected element margin on the browser itself.

In this image, the element is selected, which will show the style of the element.

You can also change the padding and margin in that box by double-clicking on the size, but this will not change your CSS file, the change will be maintained until you refresh the page.

Padding is selected in this box so that the padding is visible on the element in the browser.

Conclusion

To control the space between or around any layout on a website, we need to understand CSS margin and padding. Many developers are confused between these two properties, but as you practice, you will better understand them.

I hope you completely understand. If you have any questions about this topic or related to web development, you can ask them in the question box below.

Next: Mastering CSS border Property with example...