Learn what is margin in CSS?
It is important to have knowledge of the box model in the css to do proper lay outing and design of HTML elements for a pixel perfect UI/UX.
A box model consists of four different components of which margin is one and it is equally important to have a good understanding of it.
As you already got a reference from the image. Margin is the area after the border of the content.
It is mostly used to create space between two elements.
div{
margin: 20px;
}
We can provide values for directions of the element like top, bottom, left, right with different values in px, %, auto, em, rem, pt etc.
We can also set the margin together for all directions or separately.
div{
margin: 20px; //sets margin for all direction
margin: 20px 40px; //sets 20px for top & bottom, sets 40px for left & right.
//sets top 20px, right 30px, bottom 40px, left 50px
margin: 20px 30px 40px 50px;
//sets top 20px, right & left 30px, bottom 40px
margin: 20px 30px 40px;
//separately sets the margin for all direction
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
We can only set the left and right direction margin on inline element with css. It also accepts negative value.