Skip to content

Commit

Permalink
Merge pull request #5 from bpd01001/feature/border-box-purpose
Browse files Browse the repository at this point in the history
What does box sizing border box do? What are its advantages?
  • Loading branch information
bpd01001 authored Apr 16, 2019
2 parents 2bed6aa + 42cdf6c commit eeca3dc
Showing 1 changed file with 7 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

Border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

0 comments on commit eeca3dc

Please sign in to comment.