Learn Box Model to write Better CSS

Box Model

So learning Box Model is really important for any web developer to create designs in the way you want to. You might have been having hard time to create layouts or position elements in the page because of lack of knowledge of not understanding how Box Model works.
So according to Box Model every element in HTML is rectangular box and Box can have following properties as: width/height, padding, border, margin. And all of those properties on Box is optional so there can be Boxes without any of those properties. And you can check that indeed every element in HTML is rectangular box by inspecting HTML element in developer tools in chrome or firefox or browser of your choise.

And you can see that from the picture below that Each Box contains those properties as I mentioned above and understanding how those work is explained now

What part of properties is inside Box

So Box contains content, padding and border but not margin, margin is used outside the Box to create space to separate current Box from other Boxes.

Content

So auto x auto in that picture is basically content of the Box and content is basically texts, images, videos, input anything in the UI and all other nested element inside current element is placed in its content.

Padding

So padding is transparent area that creates space in between border and content of the Box which is part of the Box and background-color of the element covers its padding.

Border

Border basically wrap around padding and content of the Box and is part of the Box

Margin

And margin is also transparent area that is outside the Box and creates space around current Box with other Boxes. And background-colour of the parent element covers margin.

Fill Area

So fill area contains border, padding and content of the Box and fill area is filled with background-color and img, background-img.

Different types of Boxes

So as you might have already known that there are 2 types of elements in HTML, block-level and inline-level elements or as we should call Boxes. And type of Box is determined with display property. So display property of block-level boxes are by default set to block and as you can guess that display property of inlin-level boxes are by default set to inline.

Block level Boxes

• So block-level Boxes occupy 100% width of the parent element
• They are starcked on top of one another
• All Box Model properties apply to them

Inline level Boxes

• inline-level Boxes occupy only the space of their content
• they are stacked left to right in a single line till their combined width smaller than the width of the parent element
• width and height can not be applied to inline-level Boxes
• only left and right margin work on them
• like margin, padding only applies to the left and right sides of the Box. And when you give and top and bottom padding to the inline Box, top and bottom paddings cover Boxes on top and bottom of the inline Box

Inline Block level Boxes

• like inline-level Boxes, they occupy the their content needs
• they are also stacked in single line, left to right fashion
• all Box Model properties apply as in block-level Boxes

2 Types of Box Sizing properties on Boxes

1. box-sizing: content-box

Paddings and Borders on box-sizing: content-box

When box-sizing is set to content-box(default value) on element(s) then borders and paddings grow outwards because their sum is added to width and height of the content of the Box to find out total size of the Box.

• So width of block level and inline-block Box is determined when box-sizing is set to content-box which is default value, by following formula.

  • width = left border + left padding + specified width + right padding + right border
  • For example: if left and right borders are 5px each and left and right padding are 25px each and specified width is 500px then their total sum which is 5px + 25px + 500px + 25px + 5px = 560px is total width of block level and inline-block Boxes.

• And to determine height of the block level and inline-block Boxes when box-sizing is set to content-box, you have to use following formula.

  • height = top border + top padding + specified height + bottom padding + bottom border
  • For example: if top and bottom borders are 10px each and top and bottom padding are 30px each and specified height is 200px then their total sum which is 10px + 30px + 200px + 30px + 10px = 280px is total height of block level and inline-block Boxes.

2. box-sizing: border-box

Paddings and Borders on box-sizing: border-box

When box-sizing is set to border-box on element(s) then borders and paddings grows inwards eating up width and height of the content because sum of borders and paddings replace equivalent amount of value from width & height of the content of the Box as they become part of width & height.

Width of block and inline-block Boxes

• When box sizing is set to border-box, width of block and inline-block Boxes is determined only with specified width. And left and right paddings and borders are not added to specified width of the Box but sum of left and right paddings and borders become part of the width of the Box
  • width = specified width.
  • So if left and right border is 5px each and left and right paddings are 10px and width of the Box is 100px then width of the Box will be 100px but sum of left and right borders and paddings eat up value in their equivalant amount from the width of the content and be part of the width.
    • So in this case:
      • width of the content will be: 100px - (10px + 20px) = 70px but overall width of the Box will be 100px and paddings and borders just become part of it

Height of block and inline-block Boxes

• So height of the block level and inline-block Boxes when box-sizing is set to border-box, is determined by only its height and sum of top and bottom borders and paddings become part of the height of the Box.
  • height = specfied height
  • For example: if top and bottom borders are 5px and top and bottom paddings 15px each and height of the Box is 400px, total height of the Box will be of course 400px but as width, sum of top and bottom borders and paddings eat up value in their equivalant amount from the height of the content and be part of the height.
    • So in this case:
      • height of the content will be 400px - (10px + 30px) = 360px but total height of the Box will still be 400px, paddings and borders just become part of height but not added.

Summary: So this was fundamentals of Box Model, now each time you look at round images, buttons or just texts etc.. look at them as just rectangular Boxes not as they appear on the page, doing so enables you to build web apps, sites more effectively.