Skip to content

Commit

Permalink
Create what-does-box-sizing-border-box-do-what-are-its-advantages.md
Browse files Browse the repository at this point in the history
  • Loading branch information
jap15104 authored Apr 12, 2019
1 parent 2bed6aa commit 42cdf6c
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 42cdf6c

Please sign in to comment.