Hello guys! good afternoon and welcome to another section of my tutorial on CSS. In this tutorial i want to talk about CSS Margins.
The margin property defines the space around a HTML element. It is possible to use negative values to overlap content.
The values of a margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.
You can also read our tutorial post on: Html - Text Links
We have the following properties to set an element margin.
- The margin specifies a shorthand property for setting the margin properties in one declaration.
- The margin-bottom specifies the bottom margin of an element.
- The margin-top specifies the top margin of an element.
- The margin-left specifies the left margin of an element.
- The margin-right specifies the right margin of an element.
Now let's take a look at how to use these properties with examples.
The Margin Property
The margin property allows you to set all the properties of the four margins in one declaration. Here is the syntax to set a margin around a paragraph:
<html>
<head>
</head>
<body>
<style type="text/css">
p {margin: 10px} All four margins will be 10px </p>
p {margin: 10px 3%} Top and bottom margin will be 10px, while the left and
right margin will be 3% of the total width of the HTML document. </p>
p {margin: 10px 3% -7px} Top margin will be 10px, left and right margin will
be 3% of the total width of the HTML document, while the bottom margin will be
-7px. </p>
p {margin: 10px 3% -7px auto} Top margin will be 10px, right margin will be
3% of the total width of the HTML document, bottom margin will be -7px, while
the left margin will be set by the browser. </p>
</style
</body>
</html>
<head>
</head>
<body>
<style type="text/css">
p {margin: 10px} All four margins will be 10px </p>
p {margin: 10px 3%} Top and bottom margin will be 10px, while the left and
right margin will be 3% of the total width of the HTML document. </p>
p {margin: 10px 3% -7px} Top margin will be 10px, left and right margin will
be 3% of the total width of the HTML document, while the bottom margin will be
-7px. </p>
p {margin: 10px 3% -7px auto} Top margin will be 10px, right margin will be
3% of the total width of the HTML document, bottom margin will be -7px, while
the left margin will be set by the browser. </p>
</style
</body>
</html>
Below is an example:
<html>
<head>
</head>
<body>
<p style="margin: 10px; border: 2px solid black;">
all four margin will be 10px.
</p>
<p style="margin: 10px 3%; border: 2px solid black;">
top and bottom margin will be 10px, while left and right margin will be 3% of the total
width of the HTML document.
</p>
<p style="margin: 10px 3% -7px; border: 2px solid black;">
top margin will be 10px, left and right margin will be 3% of the total width of the HTML
document, while the bottom margin will be -7px.
</p>
<p style="margin: 10px 3% -7px auto; border: 2px solid black;">
top margin will be 10px, right margin will be 3% of the total width of the HTML document,
bottom margin will be -7px, while the left margin will be set by the browser.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="margin: 10px; border: 2px solid black;">
all four margin will be 10px.
</p>
<p style="margin: 10px 3%; border: 2px solid black;">
top and bottom margin will be 10px, while left and right margin will be 3% of the total
width of the HTML document.
</p>
<p style="margin: 10px 3% -7px; border: 2px solid black;">
top margin will be 10px, left and right margin will be 3% of the total width of the HTML
document, while the bottom margin will be -7px.
</p>
<p style="margin: 10px 3% -7px auto; border: 2px solid black;">
top margin will be 10px, right margin will be 3% of the total width of the HTML document,
bottom margin will be -7px, while the left margin will be set by the browser.
</p>
</body>
</html>
You can also read our tutorial post on: Html Elements
The margin-bottom Property
The margin-bottom property allows you to set the bottom margin of an element. It can have a value in length, %, or auto.
Below is an example:
<html>
<head>
</head>
<body>
<p style="margin-bottom: 10px; border: 2px solid black;">
this is a paragraph with a specified bottom margin of 10px.
</p>
<p style="margin-bottom: 6%; border: 2px solid black;">
this is another paragraph with a specified bottom margin in percentage.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="margin-bottom: 10px; border: 2px solid black;">
this is a paragraph with a specified bottom margin of 10px.
</p>
<p style="margin-bottom: 6%; border: 2px solid black;">
this is another paragraph with a specified bottom margin in percentage.
</p>
</body>
</html>
The margin-top Property
The margin-top property allows you to set the top margin of an element. It can have a value in length, %, or auto.
Below is an example:
<html>
<head>
</head>
<body>
<p style="margin-top: 10px; border: 2px solid black;">
this is a paragraph with a specified top margin of 10px.
</p>
<p style="margin-top: 6%; border: 2px solid black;">
this is another paragraph with a specified top margin in percentage.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="margin-top: 10px; border: 2px solid black;">
this is a paragraph with a specified top margin of 10px.
</p>
<p style="margin-top: 6%; border: 2px solid black;">
this is another paragraph with a specified top margin in percentage.
</p>
</body>
</html>
You can also read our tutorial post on: Html Basic Tags
The margin-left Property
The margin-left property allows you to set the left margin of an element. It can have a value in length, %, or auto.
Below is an example:
<html>
<head>
</head>
<body>
<p style="margin-left: 10px; border: 2px solid black;">
this is a paragraph with a specified left margin of 10px.
</p>
<p style="margin-left: 6%; border: 2px solid black;">
this is another paragraph with a specified left margin in percentage.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="margin-left: 10px; border: 2px solid black;">
this is a paragraph with a specified left margin of 10px.
</p>
<p style="margin-left: 6%; border: 2px solid black;">
this is another paragraph with a specified left margin in percentage.
</p>
</body>
</html>
The margin-right Property
The margin-right property allows you to set the right margin of an element. It can have a value in length, %, or auto.
Below is an example:
<html>
<head>
</head>
<body>
<p style="margin-right: 10px; border: 2px solid black;">
this is a paragraph with a specified right margin of 10px.
</p>
<p style="margin-right: 6%; border: 2px solid black;">
this is another paragraph with a specified right margin in percentage.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="margin-right: 10px; border: 2px solid black;">
this is a paragraph with a specified right margin of 10px.
</p>
<p style="margin-right: 6%; border: 2px solid black;">
this is another paragraph with a specified right margin in percentage.
</p>
</body>
</html>
Alright guys! this is it for this tutorial on CSS margins. Feel free to ask your questions in areas you don't understand very well.
Like our facebook page and also subscribe with us to get our tutorial posts delivered directly to your emails.
You can follow us on twitter