The margin
property is used to specify the margin around an element. It can be applied to both block and inline elements. Margins can be specified in number of units (e.g., 20px
) or in percentage of the width of the containing element. Learn how to adjust margins with CSS below.
Take our Introduction to CSS Training course for free.
See the Course Outline and RegisterEach side of an element can have a different margin. The properties for this are:
Start with a standard HTML document, then add the div
tags with the style
information in them, like so:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Margin</title>
</head>
<body>
<h1>CSS Margin</h1>
<div style="background-color: #0066ff;
border: 5px solid #ff99ff; padding: 0px;">
<div style="background-color: #ff6600; border: 2px solid black;
margin-top: 30px; margin-right: 30px;
margin-bottom: 30px; margin-left: 30px;">
margin-top: 30px;<br>
margin-right: 30px;<br>
margin-bottom: 30px;<br>
margin-left: 30px;
</div>
</div>
<hr>
<div style="background-color: #0066ff;
border: 5px solid #ff99ff; padding: 0px;">
<div style="background-color: #ff6600;
border: 2px solid black; margin: 30px;">
margin: 30px;
</div>
</div>
</body>
</html>
This code will render the following:
Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.