CSS Margins

Margins in CSS

CSS Margins property is used to define the space around elements. It is completely transparent and doesn’t have any background color. It clears an area around the element.

Top, bottom, left and right margin. You can also change all properties at once by using shorthand margin property.


CSS Margins Properties:

i. margin : This property is used to set all the properties in one declaration.

ii. margin-left : It is used to set left margin of an element.

iii. margin-right : It is used to set right margin of an element.

iv. margin-top : It is used to set top margin of an element.

v. margin-bottom : It is used to set bottom margin of an element.


CSS Margin Values:

These are some possible values for margin property.

1. auto : This is used to let the browser calculate a margin.

2. length : It is used to specify a margin pt, px, cm, etc. its default value is 0px.

3. % : It is used to define a margin in percent of the width of containing element.

4. inherit : It is used to inherit margin from parent element.


CSS margin Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;
}
p.ex {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>

Margin: Shorthand Property

It specifies all the margin properties in one property.There are four types to specify the margin property. You can use one of them.

i. margin: 50px 100px 150px 200px;

ii. margin: 50px 100px 150px;

iii. margin: 50px 100px;

iv. margin 50px;


i) margin: 50px 100px 150px 200px; It identifies that:

top margin value is 50px
right margin value is 100px
bottom margin value is 150px
left margin value is 200px

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;
}
p.ex {
    margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html> 

ii) margin: 50px 100px 150px; It identifies that:

Top margin value is 50px
left and right margin values are 100px
bottom margin value is 150px

 Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;
}
p.ex {
    margin: 50px 100px 150px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html> 

iii) margin: 50px 100px; It identifies that:

top and bottom margin values are 50px
left and right margin values are 100px

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;
}
p.ex {
    margin: 50px 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html> 

iv) margin: 50px; It identifies that:

top right bottom and left margin values are 50px

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;
}
p.ex {
    margin: 50px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html> 

Recommended Posts:

Spread the love

Leave a Comment

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