”;
CSS Margins are used to create space around outer part of an element. In this tutorial we will learn how to add different types of margins to HTML elements and properties associated with it.
What is CSS Margin?
- A Margin in CSS make layout visually appealing by adding extra space between elements.
- You can set margin for individual sides using properties margin-bottom, margin-top, margin-left and margin-right
- Negative Margin: A margin with negative value indicate the elements overlap with each other.
CSS Margins Example
You can try different ways to use to create margins in the below section and you can change the values as well.
Table of Contents
Define Margin
To define any margin on any HTML element you can use CSS margin property, this property is shorthand property of ”margin-top”, ”margin-right”, ”margin-bottom” and ”margin-left” properties. A single value will generate margin all around the element.
Syntax
margin: "value";
Example
As you can see in this below example we have made a 10px and 20px margin surrounding the paragraph element and highlight the margin area with light-green background.
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<h3>CSS Margin</h3>
<div>
<div style="margin: 20px; background: white;">
CSS Margin 20px all sides
</div>
<hr color="blue">
<div style="margin: 10px; background: white;">
CSS Margin 10px all sides
</div>
</div>
</body>
</html>
Margin Individual Sides
As we have mentioned earlier the margin is shorthand property for all Individual sides margin. You can set different margin values for top, right, bottom and left sides.
- margin-top: This property is used to set the margin top on any element.
- margin-right: This property is used to set the margin right on any element.
- margin-bottom: This property is used to set the margin bottom on any element.
- margin-left: This property is used to set the margin left on any element.
You can check the attached image for more clarity on individual side margins.
Syntax
margin-top: "value"; margin-right: "value"; margin-bottom: "value"; margin-left: "value";
Example
In this example we have create 4 different element and generated margin on each element”s individual sides with the above mentioned properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: lightgreen;
border: 1px solid black;
}
span {
background-color: white;
}
</style>
</head>
<body>
<h1>Tutoriaslpoint</h1>
<h3>CSS Margin</h3>
<div>
<p style="margin-top: 15px;">
<span>CSS Margin Top Applied on Paragraph Element</span>
</p>
<hr>
<p style="margin-right: 15px;">
<span>CSS Margin Right Applied on Paragraph Element</span>
</p>
<hr>
<p style="margin-bottom: 15px;">
<span>CSS Margin Bottom Applied on Paragraph Element</span>
</p>
<hr>
<p style="margin-left: 15px;">
<span>CSS Margin Left Applied on Paragraph Element</span>
</p>
</div>
</body>
</html>
All the left over space on the right side of the element can be confusing to identify the margin, if you try on your own by changing values it will clear the margin concept. And always remember negative values are not allowed for margin in CSS.
Different Ways to Apply Margin on HTML Elements
There are four ways to provide value to the CSS margin property all of them are mentioned and described bellow with the complete example code.
- Single Values: Here you can provide a single value to the margin property that same value will be applicable on four sides of the the element.
- Two Values: Here you have to provide two values that will be used as top, bottom and right, left margin value.
- Three Values: In this way you can provide three values that will define top, left, right and bottom value. Like if you set margin: 20px 40px 10px. In this case top margin will be 20px, right and left margins will be 40px and bottom margin will be 10px.
- Four Values: If you provide four values to the margin property it will generate top margin from first value, right margin from 2nd value and so on.
Syntax
margin: "value" // Single Value margin: "value value" // Two Values margin: "value value value" // Three Values margin: "value value value value" // Four Values
Example
In this following example we have crated a four different element and used inline css to generate margin around the element in different ways.
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin</title>
<style>
div{
background-color: lightgray;
border: 1px solid black;
}
p {
background-color: lightgreen;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>Tutoriaslpoint</h1>
<h3>CSS Margin</h3>
<div>
<p style="margin: 20px">
<span>Margin property with Single Value</span>
</p>
<hr/>
<p style="margin: 10px 20px">
<span>Margin property with two Values</span>
</p>
<hr/>
<p style="margin: 10px 15px 20px">
<span>Margin property with three Values</span>
</p>
<hr/>
<p style="margin: 5px 10px 15px 20px">
<span>Margin property with four Values</span>
</p>
</div>
</body>
</html>
Margin Mix up Units
CSS does not restrict usage of multiple units for specifying the values of margin, while specifying in shorthand property. That means one can pass values of length as pixel along with ems or inches, etc.
Syntax
h2 {
margin: 20px 4ex .5in 3em;
}
Example
In this following example we will provide 4 values on margin property but each value will be mentioned in different units..
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 2px solid;
}
h2 {
margin: 20px 4ex .5in 3em;
background-color: silver;
}
</style>
</head>
<body>
<div>
<h2>
The different length units are passed
as margin values to the h2 element.
</h2>
</div>
</body>
</html>
Margin Percentage Values
Margin property can have a percentage value passed, as CSS allows it. Percentages are calculated in relation to the width of the parent element’s content area.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
border: 2px solid;
}
p {
margin: 10%;
background-color: silver;
}
</style>
</head>
<body>
<div>
<p>
The margin defined for p element is
10%which is calculated as 10% of width
of parent element(div), which means
it is 10% of 300px and that is 30px.
</p>
</div>
</body>
</html>
Margin Auto and Inherit Value
The property value margin: auto is used to center an element horizontally.
The property value margin: inherit is used to inherit same margin as parent element.
Example
In this example we will discuss auto and inherit value for margin
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
margin: auto;
background-color: lightgray;
}
p {
margin-left: 20px;
border: 2px solid black;
padding: 10px
}
span{
background-color: silver;
border: 2px solid black;
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Margin Auto</h2>
<div>
A div element centered using margin: auto;
</div>
<h2>Margin Inherit</h2>
<p>
Some texts..<span>The span tag uses
same margin as parent paragraph</span>
</p>
</body>
</html>
Margin Properties Reference
You can explore more examples on margin properties by visiting the sub topics listed in the following table:
| Property | Description | Example |
|---|---|---|
| margin | A shorthand property that is used for setting all the margin properties in one declaration. | |
| margin-top | Sets the top margin of an element. | |
| margin-right | Sets the right margin of an element. | |
| margin-bottom | Sets the bottom margin of an element. | |
| margin-left | Sets the left margin of an element. |
”;