codescracker


css

CSS Margin



« Previous Tutorial Next Tutorial »


The blank area around the border of an element is called margin.

Margin is used to create an extra space around an element. It is completely transparent and does not contain any background color.

Margin is also used to determine spacing around different elements. The margin property is used to set all the sides of an element, such as top, right, bottom, and left.

CSS Margin Syntax

The syntax to set the margin property is as follows:

p { margin: value; }

CSS Margin Possible Values

The table given below describes possible values of the margin property:

Value Description
Auto Defines margin.
Length Defines a fixed margin in px, pt, and cm. The default value of this property is 0px.
% Defines margin in percentage. The value of margin is the height of the nearest block.
Inherit Defines that margin should be inherited from the parent element.

Margin Individual Sides

A box has four sides; therefore, the margin in a box is divided into the following four properties:

CSS Margin Example

The following code fragment shows the specifications of margin property in the box model:

#container{
margin-top: 7px;
margin-left: 25%;
margin-right: auto;
margin-bottom: 45px;
border: 2px solid black;
}

The top, right, bottom, and left values of a margin can be changed independently by using different properties, such as margin-top, margin-right, margin-bottom, and margin-left. Here is an example demonstrates margin property in CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Margin Example</title>
	<style>
		p { background-color:black;color:white;padding:10px; }
		p.mrg { margin-top: 50px; margin-bottom: 50px;
				margin-right: 150px; margin-left: 50px; }
	</style>
</head>
<body>

<p>This is a paragraph with no specified margins.</p>
<p class="mrg">This is a paragraph with specified margins.</p>

</body>
</html>

Here is the sample output produced by the above CSS margin example code:

css margin example

CSS margin Shorthand

A margin shorthand property is used to change all the properties of margin at once. The values of margin property ranges between one and four. Let's take a look at each case one by one.

(i) If CSS margin property contains four values like this:

margin: 25px 50px 75px 100px;

Then, these four values represents:

(ii) If CSS margin property contains three values like this:

margin: 25px 50px 75px;

Then, these three values represents:

(iii) If CSS margin property contains two values like this:

margin: 50px 100px;

Then, these two values represents:

(iv) And, if CSS margin property contains only one value like this:

margin: 100px;

Then, the above value represents:

CSS margin Shorthand Example

The margin: 12px 25px 150px 100px; property of an element specifies that the top margin has the value of 12px, the right margin has the value of 25px, the bottom margin has the value of 150px, and the left margin has the value of 100px.

If the margin property has only one value, i.e. 25px, then all the sides of the margin, such as left, right, top, and bottom have the value of 25px.

Here is an example demonstrates margin shorthand property in CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Margin Example</title>
	<style>
		p { background-color:black;color:white;padding:10px; }
		p.mrg { margin: 50px 70px; }
	</style>
</head>
<body>

<p>This is a paragraph with no specified margins.</p>
<p class="mrg">This is a paragraph with specified margins.</p>

</body>
</html>

Below is the sample output produced by the above CSS margin example code:

css margin shorthand

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test