-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from bpd01001/feature/border-box-purpose
What does box sizing border box do? What are its advantages?
- Loading branch information
Showing
1 changed file
with
7 additions
and
0 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
03 - CSS/what-does-box-sizing-border-box-do-what-are-its-advantages.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |