CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

  div {
           margin-top: 10px;
           margin-right: 15px;
           margin-bottom: 10px;
           margin-left: 15px;
		} 

            

The CSS Box Model Recap:

+------------------------+
|     Margin             |
|  +------------------+  |
|  |    Border        |  |
|  |  +------------+  |  |
|  |  |  Padding    |  |  |
|  |  |  Content    |  |  |
|  |  +------------+  |  |
|  +------------------+  |
+------------------------+

 

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

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