CSS Margins
The CSS margin properties create space around an element, outside of its border.
Margins set the distance between an element's border and the elements around it.
CSS lets you set the margin for each side of an element (top, right, bottom, left), and there is a shorthand property for setting them all at once.
Example
This element has a margin of 70px on every side.
<style> block, give a <div> a margin of 70px and a visible border and background so the space around it is clear. Put some text inside the div.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This element has a margin of 70px.</div>
</body>
</html>
Margin - Individual Sides
CSS has a property for each side: margin-top, margin-right, margin-bottom, and margin-left.
All margin properties can take these values:
auto— the browser works out the margin.- a length — a margin in
px,pt,cm, and so on. - a percent — a margin as a percent of the containing element's width.
inherit— the margin is taken from the parent element.
Tip: Negative values are allowed.
Example
Each side of the paragraph gets a different margin.
<style> block, give a <p> margin-top 100px, margin-bottom 100px, margin-right 150px, and margin-left 80px. Give it a border so the margins are visible. Add a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>This paragraph has different margins on all four sides.</p>
</body>
</html>
Margin - Shorthand Property
To make the code shorter, you can set all the margins in one margin property, which stands for margin-top, margin-right, margin-bottom, and margin-left.
The number of values changes which sides they apply to:
- Four values (
25px 50px 75px 100px): top, right, bottom, left. - Three values (
25px 50px 75px): top, then right and left, then bottom. - Two values (
25px 50px): top and bottom, then right and left. - One value (
25px): all four sides.
Four values
Sets the top, right, bottom, and left margins in order.
<style> block, give a <p> margin: 25px 50px 75px 100px (top, right, bottom, left) and a border so the margins show. Add a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px 50px 75px 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Four values: 25px top, 50px right, 75px bottom, 100px left.</p>
</body>
</html>
Three values
Sets the top, then the right and left, then the bottom.
<style> block, give a <p> margin: 25px 50px 75px (top, right and left, bottom) and a border so the margins show. Add a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px 50px 75px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Three values: 25px top, 50px right and left, 75px bottom.</p>
</body>
</html>
Two values
Sets the top and bottom, then the right and left.
<style> block, give a <p> margin: 25px 50px (top and bottom, then right and left) and a border so the margins show. Add a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Two values: 25px top and bottom, 50px right and left.</p>
</body>
</html>
One value
Sets the same margin on all four sides.
<style> block, give a <p> margin: 25px (all four sides) and a border so the margins show. Add a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>One value: 25px on all four sides.</p>
</body>
</html>
The auto Value
Set margin to auto to center the element horizontally in its container. The element keeps its set width, and the leftover space is split evenly between the left and right margins.
Example
The 300px-wide div is centered using margin: auto.
<style> block, give a <div> a width of 300px, margin: auto, and a 1px solid red border. The div should sit centered in its container. Put some text inside.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div>This div is centered with margin: auto.</div>
</body>
</html>
The inherit Value
Set margin to inherit to take the margin from the parent element.
Example
The paragraph's left margin is inherited from its parent div.
<style> block, give a <div> a 1px solid red border and margin-left 100px. Give a paragraph with class "ex1" margin-left: inherit, so it copies the left margin from the parent div. Put the paragraph inside the div.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<div>
<p class="ex1">This paragraph inherits its left margin from the parent div.</p>
</div>
</body>
</html>
All CSS Margin Properties
A summary of the margin properties:
margin— sets all the margins in one declaration.margin-bottom— sets the bottom margin.margin-left— sets the left margin.margin-right— sets the right margin.margin-top— sets the top margin.