CSS margin properties
With CSS margin properties, you can specify how much space there should be around elements.
This lesson focuses on:
- Setting the left margin of an element
- Setting the right margin of an element
- Setting the top margin of an element
- Setting the bottom margin of an element
Setting the left margin of an element
The left margin of an element is set using the margin-left property.
Example:
<html>
<head>
<title>Setting the left margin of an element</title>
</head>
<body>
<p>
This paragraph has no specified margin.
</p>
<p style="margin-left: 5cm;">
This paragraph has a left margin of 5 centimeters.
</p>
</body>
</html>
Output:
This paragraph has no specified margin.
This paragraph has a left margin of 5 centimeters.
In the above example, there are two paragraphs. The first paragraph has no specified margin. The second paragraph has a left margin of 5 centimeters.
Setting the right margin of an element
The right margin of an element is set using the margin-right property.
Example:
<html>
<head>
<title>Setting the right margin of an element</title>
</head>
<body>
<p>
This paragraph has no specified margin.
</p>
<p style="margin-right 10cm;">
This paragraph has a right margin of 10 centimeters.
</p>
</body>
</html>
Output:
This paragraph has no specified margin.
This paragraph has a right margin of 10 centimeters.
In the above example, there are two paragraphs. The first paragraph has no specified margin. The second paragraph has a right margin of 10 centimeters.
Setting the top margin of an element
The top margin of an element is set using the margin-top property.
Example:
<html>
<head>
<title>Setting the top margin of an element</title>
</head>
<body>
<p>
This paragraph has no specified margin.
</p>
<p style="margin-top: 2in;">
This paragraph has a top margin of 2 inches.
</p>
</body>
</html>
Output:
This paragraph has no specified margin.
This paragraph has a top margin of 2 inches.
In the above example, there are two paragraphs. The first paragraph has no specified margin. The second paragraph has a top margin of 2 inches.
Setting the bottom margin of an element
The bottom margin of an element is set using the margin-bottom property.
Example:
<html>
<head>
<title>Setting the bottom margin of an element</title>
</head>
<body>
<p>
This paragraph has no specified margin.
</p>
<p style="margin-bottom: 2in;">
This paragraph has a bottom margin of 2 inches.
</p>
</body>
</html>
Output:
This paragraph has no specified margin.
This paragraph has a bottom margin of 2 inches.
In the above example, there are two paragraphs. The first paragraph has no specified margin. The second paragraph has a bottom margin of 2 inches.
