Margin

Contact Us or call 1-877-932-8228
Margin

Margin

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.

Code Sample:

BordersMarginsAndPadding/Demos/Margin.html
<!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>

The above code will render the following results:CSS Margin

Specifying Margins by Side

Each side of an element can have a different margin. The properties for this are listed below:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
Next