From 42cdf6c75a9d7c1ad01a04bfcdb399250d152544 Mon Sep 17 00:00:00 2001 From: Julia Padget Date: Fri, 12 Apr 2019 13:13:52 -0400 Subject: [PATCH] Create what-does-box-sizing-border-box-do-what-are-its-advantages.md --- ...oes-box-sizing-border-box-do-what-are-its-advantages.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 03 - CSS/what-does-box-sizing-border-box-do-what-are-its-advantages.md diff --git a/03 - CSS/what-does-box-sizing-border-box-do-what-are-its-advantages.md b/03 - CSS/what-does-box-sizing-border-box-do-what-are-its-advantages.md new file mode 100644 index 0000000..0be9633 --- /dev/null +++ b/03 - CSS/what-does-box-sizing-border-box-do-what-are-its-advantages.md @@ -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.