CSS Margin Property Order

CSS box model explained

Today we are going to give you information about CSS margin property. We have discussed the CSS box model and its properties. We have discussed the margins property of the CSS box model in the previous post. Now here we will discuss CSS margin property in a bit detail. As we have told you that margins are used to represent the spaces between elements. The margins have no colors they are totally transparent. They are not included in the overall or total width of an element. But they are a part of the box model. They are very important when it comes to get proper spacing between elements.

CSS box model explained

Most of the HTML elements have their default margin set if you do not over write it. The developers use a CSS for this purpose called CSS reset. This CSS is used to over write the default styles for many elements by different browsers.

CSS Margin Syntax

The margin for an element can be set in various ways. You can set them with a single line defining margin for each side. See the code below that how you can set the margins with single CSS style statement.

  • margin: 5px 10px 15px 20px;
    • top margin is 5px
    • right margin is 10px
    • bottom margin is 15px
    • left margin is 20px
  • margin: 5px 10px 5px;
    • top margin is 5px
    • right and left margins are 10px
    • bottom margin is 5px
  • margin: 15px 20px;
    • top and bottom margins are 15px
    • right and left margins are 20px
  • margin: 5px;
    • all four margins are 5px

The above styles are showing how you can set margins with one line of code. These are used very commonly in web development. You have to understand these well because that’s how many styles are set in CSS.

Individual Properties

The margins can be set with their individual values as well. Here are the ways how you can set the margins individually.

magin-top: //value goes here;

magin-right: //value goes here;

magin-bottom: //value goes here;

magin-left: //value goes here;

Vertical Margin Collapse

You have to be very careful about the vertical margins. Unlike horizontal margins the vertical margins tend to collapse. This means that if there are two element stack on each other both having margins. The margin of only one element will work. See the example below to understand the concept more.

h1 {

margin: 0 0 25px 0;

background-color: #FF61E7;

color: #65FF61;

}

p {

margin: 20px 0 0 0;

background-color: #250E21;

color: white;

}

vertical-margin-collapse

CSS Vertical Border Collapse

As you can see in the code that the margin-bottom for h1 element is set to 25px and margin-top for the p element is 20px. As the vertical margin collapse margin with the higher value will be applied as it is 25px in this case. You can see in the picture that the margin gap is 25px between the two elements.

Lear more about CSS properties information here on HowToCode.PK

Comments