In CSS3 we use the Margin property to wrap the content, the CSS Margin is the outermost layer, we use CSS margin to define an empty space that we can use to create space between one element and another.
CSS margin allow us to have full control over the element margins, we can control the margin for each side of en element, top, bottom, right, left.
In CSS there are 4 properties that define the margin of each side of an element:
create the top margin of an element
create the bottom margin of an element
create the right margin of an element
create the left margin of an element
Modern CSS also allow us to be efficient and specify all the margin properties at once example: margin: 80px 80px 50px 120px;
This container has a margin of 50px
In the next example we use CSS margin property to control four sides of an HTML class:
the h1 element has a bottom margin of 60px and the paragraph
element has a top margin of 20px, the vertical margin between
h1 and paragraph should been 80 pixels but, because of the
margin collapse, the margin ends up being 60px.
Learn about CSS margin:auto Value
In CSS we may create an auto value to the margin property.
In CSS we use the margin:auto value to center a block element horizontally.
The definition of auto varies with elements and context. In margins, auto can mean one of two things: take up the available space or 0 px. These two will define different layouts for an element.