Box Model Properties

Box model properties refers to all the properties that is needed to respect css box model i.e total width of an html element is always sum of paddings and border and content width.

The following properties are grouped into this category are::
  1. margin
  2. padding
  3. border
  4. border-radius
  5. box-sizing
Margin:
Margin is the space between an html element and its neighbours. As such it does not contribute much in box model, but we study this in this category as this property is very similar to padding that we will study next.
Margin is made up of 4 properties i.e margin-top, margin-bottom, margin-right, margin-left representing top/bottom/ right/left space between the html element and its neightbour.

There are 4 ways of writing margin as shown in this snippet, also look at some of the diagram of margin for easy visualization here, Look the image :: 
// First way
h1{
  margin: 23px; // margin top bottom right left all is 23px
}

// Second way
h1{
  margin: 23px 10px; // margin top and bottom is 23px and right and left margin is 10px
}

// Third way
h1{
  margin: 10px 16px 8px; // margin top is 10px, margin right and left is 16px and margin bottom is 8px
}

// Fourth way
h1{
  margin: 10px 16px 8px 12px; // margin top is 10px, margin right is 16px and margin bottom is 8px and margin left is 12px
}

// Fifth way
h1{
  margin-top: 10px;
  margin-bottom: 12px;
  margin-right: 8px;
  margin-left: 7px; 
}
Explanations:
In the First way, a single margin value represents same margin of 23px, on all the four sides of an html element.

In the Second way, two margin values make up the whole margin. The first margin value in this case represents top and bottom margin of 23px and second margin value represents right and left margin of 10px.

In the Third way, three margin values make up the whole margin. The first margin value in this case represents top margin of 10px and second margin value represents right and left margin of 16px and third margin value represents bottom margin of 8px.

In the Fourth way, Four margin values make up the whole margin. The first margin value in this case represents top margin of 10px and second margin value represents right margin of 16px and third margin value represents bottom margin of 8px and fourth margin represents left margin of 12px. It is exactly like a clockwise movement.

In the Fifth way, we splitted the margin properties into margin-top, margin-bottom, margin-left and margin-right individual properties. We can use one or more margin sub-properties based on our need.
Padding:
Padding is the internal space between an html elements border and its content or content box(where real content exists).
Padding is made up of 4 properties i.e padding-top, padding-bottom, padding-right, padding-left representing top/bottom/ right/left space between an html elements border and its content or content box.

There are 4 ways of writing padding as shown in this snippet, also look at some of the diagram of padding for easy visualization here, Look the image ::: 
// First way
h1{
  padding: 23px; // padding top bottom right left all is 23px
}

// Second way
h1{
  padding: 23px 10px; // padding top and bottom is 23px and right and left padding is 10px
}

// Third way
h1{
  padding: 10px 16px 8px; // padding top is 10px, padding right and left is 16px and padding bottom is 8px
}

// Fourth way
h1{
  padding: 10px 16px 8px 12px; // padding top is 10px, padding right is 16px and padding bottom is 8px and padding left is 12px
}

// Fifth way
h1{
  padding-top: 10px;
  padding-bottom: 12px;
  padding-right: 8px;
  padding-left: 7px; 
}
Explanations:
In the First way, a single padding value represents same padding of 23px, on all the four sides of an html element.

In the Second way, two padding values make up the whole padding. The first padding value in this case represents top and bottom padding of 23px and second padding value represents right and left padding of 10px.

In the Third way, three padding values make up the whole padding. The first padding value in this case represents top padding of 10px and second padding value represents right and left padding of 16px and third padding value represents bottom padding of 8px.

In the Fourth way, Four padding values make up the whole padding. The first padding value in this case represents top padding of 10px and second padding value represents right padding of 16px and third padding value represents bottom padding of 8px and fourth padding represents left padding of 12px. It is exactly like a clockwise movement.

In the Fifth way, we splitted the padding properties into padding-top, padding-bottom, padding-left and padding-right individual properties. We can use one or more padding sub-properties based on our need.

The way to write margin and padding are same. Just remember that margin is the external space between 2 elements, while padding is the internal space within an html element between its content and its border.
Border and border radius:
Border is the boundry of an html element. Beyond its boundry, the element does not exists. There is a rectangular boundry around an html elment. The way its written in css is in below snippet, also look at the diagram of border for easy visualization here, Look the image . This black color rectangle is the border of html elements. 
h1{
  border: 1px solid black;
}


1px represents border width, you can change it to any pixel value you need. solid represents border style, its other popular values can be dotted, dashed, double etc, to read more on this : More on borders-style.

black represents border color, although you can put green or any color or even hex or rgb color also can be provided here. .

This is the most preferred way of writing border almost always. But border property can be subdivided into smaller properties too, if you are interested, read from official documentation here More on borders.

Now border-radius is used to control the edges of an html element, since all html element looks a rectangular box, we can make this little circular if needed too. The way to do this is shown below, also look at the diagram of border-radius for easy visualization here, Look the image . This edges shown by arrows are not pointed anymore and little circular as we put border-radius: 20px there. 

h1{
  border-radius: 10px;
  border: 3px solid black;
}

h2{
  border: 4px solid black;
  width: 80px;
  height: 80px;
  border-radius: 50%; // this will make the element a full circle.
}


In the above snippet, the first one is fine, but a very special case of border radius is, when the width and height is of same value (not in percentages, but in px or rem), then a border-radius of 50% or 100% will make a html element full circular.

Box sizing:
Box sizing property is what makes an html element follow css box model for consistency in a webpage. The default value of box sizing is content-box, which does not follow box model, so we need to put box-sizing: border-box to follow box model. The below snippet is always required in css to follow box model. 
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
PrevNext