gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

small grammatical changes (#20917)

Browse Source
This commit is contained in:
Kyle Jackson
2018-11-03 21:39:57 -05:00
committed by Christopher McCormack
parent a0e9e1f89b
commit 75b57369bd
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
guide/english/css/the-box-model/index.md
View File

@ -5,13 +5,13 @@ title: Box Model
Understanding the CSS Box Model is crucial to being able to correctly layout a web page. Understanding the CSS Box Model is crucial to being able to correctly layout a web page.
When a browser renders (draws) a web page each element, for example, a piece of text or an image, is drawn as a rectangular box following the rules of the CSS Box Model. When a browser renders (draws) a web page each element (e.g. a piece of text or an image) is drawn as a rectangular box following the rules of the CSS Box Model.
At the center of the box is the content itself, which takes up a certain height and width. This region is known as the **Content Area**. The size of the content area can be automatically determined, or you can explicitly set the size of height and width. (see note below regarding `box-sizing`) At the center of the box is the content itself, which takes up a certain height and width. This region is known as the **Content Area**. The size of the content area can be automatically determined, or you can explicitly set the size of height and width. (see note below regarding `box-sizing`)
![Content Area Image](https://raw.githubusercontent.com/johnkennedy9147/Resources/master/CSS%20Box%20Model%20Images/content%20area.jpg) ![Content Area Image](https://raw.githubusercontent.com/johnkennedy9147/Resources/master/CSS%20Box%20Model%20Images/content%20area.jpg)
Around the Content Area, this is a region known as **Padding Area**. The size of the padding can be the same all around (set with `padding`), or you can set individually for the top, right, bottom and left paddings (with `padding-top`, `padding-right`, `padding-bottom` and `padding-left`). The region around the Content Area is known as the **Padding Area**. The size of the padding can be the same all around (set with `padding`), or can be set individually for the top, right, bottom and left paddings (with `padding-top`, `padding-right`, `padding-bottom` and `padding-left`).
![Padding Area Image](https://raw.githubusercontent.com/johnkennedy9147/Resources/master/CSS%20Box%20Model%20Images/padding%20area.jpg) ![Padding Area Image](https://raw.githubusercontent.com/johnkennedy9147/Resources/master/CSS%20Box%20Model%20Images/padding%20area.jpg)
@ -26,8 +26,8 @@ Finally, there is the **Margin Area**. This creates clear space around the eleme
![Margin Area Image](https://raw.githubusercontent.com/johnkennedy9147/Resources/master/CSS%20Box%20Model%20Images/margin%20area2.jpg) ![Margin Area Image](https://raw.githubusercontent.com/johnkennedy9147/Resources/master/CSS%20Box%20Model%20Images/margin%20area2.jpg)
**`box-sizing` Property** **`box-sizing`**
The default for this property is `content-box`. If you use the default then the box model will allow the author to specify the size of the content area. However, it is possible to use these to instead specify the size of the border area. This is done by changing `box-sizing` property to `border-box`. This can sometimes make layouts easier. You can set the `box-sizing` property per element as desired. The default for this property is `content-box`. When using the default, the box model will allow the author to specify the size of the content area. However, it is possible to use these to instead specify the size of the border area. This is done by changing `box-sizing` property to `border-box`. This can sometimes make layouts easier. You can set the `box-sizing` property per element as desired.
#### More Information: #### More Information:
[MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model) [MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model)