Sabuj Kundu 26th May 2016

banner

Html tags can be imagined as a box, we can think a web page is a set of boxes. A div, span any thing is a box. Browser renders them using some predefined method/algorithm/techniques. Box Model is one of the technique about how to wrap a div and show it’s width, border, heights etc parameter. Box model deals with margins, borders, padding, and main content area. In this article we will try to explain the technical background of box model using graphical example.

Box Model: How to define Width ?

Main Width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

Using the formula, we can find the total width of our example code.

Total Width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

Total Width(580px) = margin-right(25px) + border-right(5px) + padding-right(10px) + width(500px) + padding-left(10px) + border-left(5px) + margin-left(25px)

580px = 25px + 5px + 10px + 500px + 10px + 5px + 25px

= 580px

Box Model: How to define Height?

Total Height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Using the formula, we can find the total Height of our example code.

Total Height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Total Height(580px) = margin-top(25px) + border-top(5px) + padding-top(10px) + height(500px) + padding-bottom(10px) + border-bottom(10px) + margin-bottom(25px)

580px = 25px + 5px + 10px + 500px + 10px + 5px + 25px

= 580px

Box-sizing:

Box-sizing property is three types

  1. content-box
  2. padding-box(only Firefox support this currencly)
  3. border-box(Most standard and popular box model)

Why Use Box-sizing:border-box ?

Different Between Normal box and Box-sizing:border-box: It’s Graphically represente below,

How to use ?

box-sizing: border-box; reset looked like this:

            div {
              box-sizing: border-box;
            }
        

Every current browser supports:

            div {
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
            }
        

Every current browser supports and globally use:

            html {
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
            }
            *, *:before, *:after {
              -webkit-box-sizing: inherit;
              -moz-box-sizing: inherit;
              box-sizing: inherit;
            }
        

box-sizing: border-box; is supported all major browsers. It is Very Useful & important for custom CSS.