CSS Margins
CSS Margins
Setting margins around HTML elements is one of the advantages of CSS over traditional web markup. This article will teach you about CSS margin properties and their component properties.
CSS Margins
The CSS margin property is a shorthand property for setting the margin area around an HTML element. Suppose you want to set a quarter-inch margin for an h1 element. Here’s the syntax:
<html> <head> <style> div { border:1px dotted } h1 { margin: 0.25in; background-color: #eee; } </style> </head> <body> <div> <h1>This h1 element has a quarter-inch margin around it!</h1> </div> </body>You can set margins using any unit, whether pixels, inches, millimeters, or ems. The default value for margins is 0 (zero), so if you don't set a margin value, no margin appears around the element. To set a 20-pixel margin around the h1 element, the above code would be written as follows:
<html> <head> <style> div { border:1px dotted } h1 { margin: 20px; background-color: #eee; } </style> </head> <body> <div> <h1>This h1 element has 20 pixels margin around it!</h1> </div> </body> </html>CSS Margins – Single-Side Properties
CSS provides four separate properties for setting the left, right, top, and bottom margins of an element.
- margin-bottom
- margin-top
- margin-left
- margin-right
The following example demonstrates how to set different margins around an h1 element:
<html>
<head>
<style>
div {
border:1px dotted
}
h1 {
margin-top: 20px; margin-right:40px; margin-bottom:10px;
margin-left:0px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h1>This h1 element has different Margins around it!</h1>
</div>
</body>
CSS Margins – Shorthand Properties
You can use the margin property to set margins on all sides with different values. Here's the syntax for using margin as a shorthand property:
h1 {margin: top right bottom left}
Here, the values for top, right, bottom, and left can be pixels, inches, ems, centimeters, etc. So, using the syntax above, we can rewrite the previous HTML code as follows:
<html>
<head>
<style>
div{
border:1px dotted
}
h1 {
margin: 20px 40px 10px 0px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h1>This h1 element has different margins around it!</h1>
</div>
</body>
CSS Margins – Setting Three Values:
We can set the margins to three values, as shown below: margin: 20px 40px 10px , in this case, the top margin is 20px, the left and right margins are 40px, and the bottom margin is 10px. Below is an example. You should try comparing the output to the previous example:
<html>
<head>
<style>
div {
border:1px dotted
}
h1 {
margin: 20px 40px 10px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h1>This h1 element has different margins around it!</h1>
</div>
</body>
CSS Margins – Setting Two Values:
We can set the margins to two values, margin: 20px 40px , in which case the top and bottom margins will be 20px, and the left and right margins will be 40px. Here's an example. You should try comparing the output to the previous example:
<html>
<head>
<style> div {
border:1px dotted
}
h1 {
margin: 20px 40px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h1>An h1 element with a grey background!</h1>
</div>
</body>
We've seen that setting a single value for margin applies the margin equally to all borders—top, right, bottom, and left. You can see this in the first example.
CSS Margins—Mixed Units
CSS allows you to mix different length values in a shorthand property to specify different margins. Within a given rule, you are not restricted to using a single type of length value, as shown below:
<html>
<head>
<style>
div{
border:1px dotted
}
h1 {
margin: 20px 5em .5in 4ex; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h1>An h1 element with a grey background!</h1>
</div>
</body>
CSS Negative Margins
CSS allows you to specify negative margins for an element. This causes the element's box to protrude beyond its parent or overlap other elements.
<html>
<head>
<style>
div {
border:1px dotted
}
h1 {
margin: 20px 40px; background-color: #eee;
}
p {
margin: -20px 40px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h1>An h1 element with grey background!</h1>
<p>This paragraph has negative margin.</p>
</div>
</body>
</html>
CSS Margins – Percentages
For element margins, it's perfectly possible to set percentage values. Percentage margin values are calculated relative to the width of the parent element's content area, so if the parent element's width changes, they will also change.
<html>
<head>
<style>
h1 {
margin:10%; background-color: #eee;
}
</style>
</head>
<body>
<div style="width: 600px; border: 1px dotted;">
<h1>An h1 element with grey background!</h1>
</div>
<div style="width: 400px; border: 1px dotted;">
<h1>An h1 element with grey background!</h1>
</div>;
</body>
</html>
CSS Margins – Inline Elements
Margins can also be applied to inline elements, but top and bottom margins have no effect on the line-height of these non-replaced elements and are always transparent. However, when you apply margins to the left and right sides of an inline non-replaced element, it will behave as shown in the example below.
<html>
<head>
<style>
div {
border:1px dotted
}
strong {
margin-top: 25px; margin-bottom: 50px;
margin-left: 25px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<p>This text has some <strong>strong text</strong> with a grey background</p>
</div>
</body>
</html>
Here, the margin-left creates some extra space before the bold text. We can create the same space before and after an element like this:
<html>
<head>
<style>
div {
border:1px dotted
}
strong {
margin: 25px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<p>This text has some <strong>strong text</strong> with a grey background</p>
</div>
</body>
</html>
CSS Margins – Auto Values
To center an element within its parent, use the margin: 0 auto property as shown in the following example:
<html>
<head>
<style>
div {
width:600px; border:1px dotted
}
h1 {
margin:0 auto;
}
</style>
</head>
<body>
<div>
<h1>An h1 element with center position!</h1>
</div>
</body>
</html>
Nevertheless, if you're using an older browser, the above code won't work, and for modern browsers, you should use the following:
<html>
<head>
<style>
div {
width:600px; border:1px dotted
}
h1 {
display: flex; justify-content:center;
}
</style>
</head>
<body>
<div>
<h1>An h1 element with center position!</h1>
</div>
</body>
</html>
CSS Margins – Related Properties
| Property | Description |
|---|---|
| margin | A shorthand property for setting all margin properties at once |
| margin-bottom | Sets the bottom margin of an element |
| margin-left | Sets the left margin of an element |
| margin-right | Sets the right margin of an element |
| margin-top | Sets the top margin of an element |
| margin-trim | Allows a container to trim its child's margins |