CSS margins are the space outside the border of an HTML element. They are used to create space around elements and can be contained using the margin property. The edge property can be set with a variety of units including pixels (px), ems, and percentages (%). The border property can also be set using the shortcut border property, which allows you to set the borders for all four sides of an element at once. The individual pages can also be set using the margin-top, margin-right, margin-bottom and margin-left properties. Negative margin values can be used to overlap elements.
All margin properties can have the following values:
Automatic – the browser calculates the margin
Length – specifies the margin in pixels, points, centimeters, etc.
% – Specifies a margin of % of the containing element’s width
Inherit – specifies that the limit should be inherited from the parent
Individual Side Margin
CSS Allows you to set margins individually for each side of an element using the margin-top, margin-right, margin-bottom und margin-left properties.
margin-top property sets the top margin of an element.
margin-right property sets the right margin of an element.
margin-bottom property sets the bottom margin of an element.
margin-left property sets the left margin of an element.
For example, the following CSS code sets the top margin to 10 pixels, the right margin to 20 pixels, the bottom margin to 30 pixels and the left margin to 40 pixels:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
You can also use the shorthand property margin to set all four margins at once, like following:
margin: 10px 20px 30px 40px;
