How Margin and Padding Works: CSS

0 Comments

Padding is used to clear the area around the content of an element within the border and is affected by the background color of the element.
While, margin clear the area around an element which is outside the border and do not have a background color.

So it is now clear how the CSS properties: margins and paddings work.

Now let’s have an explanation how these are used to style and customize the CSS and Blogger templates, taking margins as an example. We see in the picture that margins have been used to clear the area around the box. So (let) the CSS styling properties used are:

box {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

We can also write this as:

box {
margin: 10px;
}

This is because we are using 10 pixels for all the sides of the margin.

box {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 7px;
margin-left: 8px;
}

We can write this also as:

box {
margin: 5px 10px 7px 8px;
}

Notice the order of the values used. First comes the top margin, then the right margin, the bottom and then the left.

Let’s see another example:

box {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}

Notice that the top and the bottom margin have same values while the left and the right are same.
So:

box {
margin: 10px 5px;
}

The same thing happens when it comes to use the padding properties within CSS. Thus we got a general idea about how the margins and paddings are used to style CSS and Blogger templates.
For more references: W3 school CSS margin and W3 school CSS padding