CSS Margin

CSS Margin:

CSS Margin 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 can be able to changed independently using separate properties. You can also change all properties at once by using shorthand margin property.
There are following CSS margin properties:

Property Description
margin It is used to set all the properties in one declaration.
margin-left This property is used to set left margin of an element.
margin-right This property is used to set right margin of an element.
margin-top This property is used to set top margin of an element.
margin-bottom This property is used to set bottom margin of an element.

CSS Margin Values:

Property Description
auto This is used to let the browser calculate a margin.
length It is used to specify a margin cm,px,pt etc. its default value is 0px.
% It is used to dispay a margin in percent of the width of containing element.
inherit It is used to inherit margin from parent element.
Example

<!DOCTYPE html>

<html>

<head>

<style>

p { background-color: pink; }

p.ex { margin-top: 51px;

margin-bottom: 51px;

margin-right: 100px;

margin-left: 100px; }

</style>

</head>

<body>

<p> This paragraph isn’t displayed with specified margin. </p>

<p class=”ex”> This paragraph is displayed with specified pixel margin.</p>

</body>

</html>

 

 

Leave a Reply

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