. . .

CSS Margin Property

What do you mean by CSS Margin Property?

CSS Margin Property is used to separate a group of text or some item from others. It is basically used to create space between two or more items. When we add margin property to a div or other tag it creates some space outside that div or  that tag.

In CSS we can use Margin Property for individual sides:

margin-left (for margin on left side),
margin-right (for margin on right side),
margin-top (for margin on top portion),
margin-bottom (for margin on bottom portion)

Ex: We can set margins of an <p> tag in the following way:

.p
{
margin-left: 20px;
margin-right: 30px;
margin-top: 40px;
margin-bottom: 50px;
}

We can also use it by using only margin property with four values for four sides:

.p
{
margin: 20px 30px 40px 50px;
}

In the above property the four value indicates margin-top: 20px; margin-right: 30px; margin-bottom: 40px and margin-left:50px.

If we want to show show same space of margin around a text we can simply use margin property with a single value:

.p
{
margin: 50px;
}

If we use the above property then we’ll get 25px of margin on each of that paragraph i.e. margin-left: 25px; margin-right: 25px; margin-top: 25px and margin-bottom: 25px.

We can assign same space of margin on top-bottom and left-right by using two values of margin property:

.p
{
margin: 25px 50px;
}

In the above example the first value indicates margin on top and bottom portion and the second value indicates margin on left and right portion.

We can also use margin property with three values:

.p
{
margin: 20px 30px 25px;
}

In the above mention example the first value indicates margin on top portion, the second value indicates margin on left and right portion and the third value indicates margin on bottom portion.

We can also use margin:auto property use centerize a text or item horizontally according to its container.

.p
{
margin: auto;
}
Please share the article
Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

seventeen − ten =