Tutorials

Learn web design and programming with our free video and text tutorials.

Advertisements

Web Designer? Design and market your own professional website with easy-to-use tools.

Partners

How To Specify (X)HTML Element Margins

This tutorial shows you how to specify the margin of all 4 sides of an (X)HTML element with CSS.

A margin is the space outside of an (X)HTML element, which is outside of the border, inside of the border is the padding, which is the space in between the border and an (X)HTML element.

You can specify the margins on all 4 sides in one declaration using the shorthand margin property, you can set the margin of all 4 sides individually in one declaration using a shorthand, you can use a shorthand property to declare the top and bottom together and also the right and left sides together or you can specify an individual side using one margin-top, margin-right, margin-bottom or margin-left.

All margin properties allows for the use of any length value that is supported by CSS (em, pixel, centimeter, etc.), any percentage value and the auto value.

The code below shows you how to specify the margin of all 4 sides of an (X)HTML element with CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">
.yellow
{
background-color: yellow;
}
.all
{
margin: 10px;
border-style: solid;
border-color: #000;
}

</style>
</head>
<body>

<div class="yellow">

<p>
This paragraph has a margin of "0".
</p>
<p class="all">
This is a paragraph with a margin of "10px" applied to each side.
</p>
<p>
This paragraph has a margin of "0".
</p>
</div>

</body>
</html>

The code above produces the paragraphs below.

This is a paragraph with a margin of "0".

This is a paragraph with a margin of "10px" applied to each side.

This is a paragraph with a margin of "0".

All 4 Sides individually in one Declaration

The code below shows how to specify the margin of all 4 sides individually in one declaration using a shorthand, with the values specifying the sides clockwise: top, right, bottom and then left.

The fist value is this example "200px", specifies the margin for the top margin, the second value for this example "100px", specifies the margin for the right margin, the third value for this example "50px", specifies the bottom margin and the last value "10px", specifies the left margin of the (X)HTML element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">
.yellow
{
background-color: yellow;
}
.all4
{
margin: 200px 100px 50px 10px;
border-style: solid;
border-color: #000;
}

</style>
</head>
<body>

<div class="yellow">

<p>
This paragraph has a margin of "0".
</p>
<p class="all4">
This paragraph has a top margin of "200px", a right margin of "100px", a bottom margin of "50px" and a left margin of "10px".
</p>
<p>
This paragraph has a margin of "0".
</p>
</div>

</body>
</html>

This is a paragraph with a margin of "0".

This paragraph has a top margin of "200px", a right margin of "100px", a bottom margin of "50px" and a left margin of "10px".

This is a paragraph with a margin of "0".

Top/Bottom and Right/Left Shorthand Declaration

The code below shows how to use a shorthand property to declare the top and bottom together and also the right and left sides together.

The first value in this example "50px", sets the margin for both the top and the bottom sides of the (X)HTML element and the second value in this example "10px", sets the margin for both the right and left sides of the (X)HTML element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">
.yellow
{
background-color: yellow;
}
.both
{
margin: 50px 10px;
border-style: solid;
border-color: #000;
}

</style>
</head>
<body>

<div class="yellow">

<p>
This paragraph has a margin of "0".
</p>
<p class="both">
This is a paragraph with a top and bottom margin of "50px" and a right and left margin of "10px".
</p>
<p>
This paragraph has a margin of "0".
</p>
</div>

</body>
</html>

This is a paragraph with a margin of "0".

This is a paragraph with a top and bottom margin of "50px" and a right and left margin of "10px".

This is a paragraph with a margin of "0".

How to set the Top Margin

The code below shows you how to set the top margin of an (X)HTML element using the margin-top property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">
.yellow
{
background-color: yellow;
}
.top
{
margin-top: 50px;
border-style: solid;
border-color: #000;
}

</style>
</head>
<body>

<div class="yellow">

<p>
This paragraph has a margin of "0".
</p>
<p class="top">
This is a paragraph with a top margin of "50px".
</p>
<p>
This paragraph has a margin of "0".
</p>
</div>

</body>
</html>

This is a paragraph with a margin of "0".

This is a paragraph with a top margin of "50px".

This is a paragraph with a margin of "0".

How to set the Right Margin

The code below shows you how to set the right margin of an (X)HTML element using the margin-right property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">
.yellow
{
background-color: yellow;
}
.right
{
margin-right: 50px;
border-style: solid;
border-color: #000;
}

</style>
</head>
<body>

<div class="yellow">

<p>
This paragraph has a margin of "0".
</p>
<p class="right">
This is a paragraph with a right margin of "50px".
</p>
<p>
This paragraph has a margin of "0".
</p>
</div>

</body>
</html>

This is a paragraph with a margin of "0".

This is a paragraph with a right margin of "50px".

This is a paragraph with a margin of "0".

How to set the Bottom Margin

The code below shows you how to set the bottom margin of an (X)HTML element using the margin-bottom property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">
.yellow
{
background-color: yellow;
}
.bottom
{
margin-bottom: 50px;
border-style: solid;
border-color: #000;
}

</style>
</head>
<body>

<div class="yellow">

<p>
This paragraph has a margin of "0".
</p>
<p class="bottom">
This is a paragraph with a bottom margin of "50px".
</p>
<p>
This paragraph has a margin of "0".
</p>
</div>

</body>
</html>

This is a paragraph with a margin of "0".

This is a paragraph with a bottom margin of "50px".

This is a paragraph with a margin of "0".

How to set the Left Margin

The code below shows you how to set the left margin of an (X)HTML element using the margin-left property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">
.yellow
{
background-color: yellow;
}
.left
{
margin-left: 50px;
border-style: solid;
border-color: #000;
}

</style>
</head>
<body>

<div class="yellow">

<p>
This paragraph has a margin of "0".
</p>
<p class="left">
This is a paragraph with a left margin of "50px".
</p>
<p>
This paragraph has a margin of "0".
</p>
</div>

</body>
</html>

This is a paragraph with a margin of "0".

This is a paragraph with a left margin of "50px".

This is a paragraph with a margin of "0".