Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lessons/layout-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ The `background-color` of the parent of the container is `blue`. The `2px dashed
* `border` – Next is the border. If your element has a border, it comes next (not everything has or needs a border.)
* `padding` – Inside the border is the `padding`. This is the spacing **inside** the element. If you give something a `background-color`, you will color the padding space. In our diagram above, you can see the space between the red, solid border and the green, dashed border. This is the padding of the element.

Right now, the above element doesn't have a set `height` or `width`, which means it will take its height from what ever inside of it and it will try to take `100%` of the width it can. We can modify both of these. However, if I say `width: 200px`, _what_ is `200px` wide? Unfortunately, the answer is it depends. It depends on what the value of the `box-sizing` property. By default, it does things the old way of writing code which if I say `width: 200px` I am _not including_ the `border` or the `padding`. This is annoying because if I'm trying to fit things together well, it's much easier to include `border` and `padding`. Remember how I told you to never use the wild card selector before? This is the one exception where I permiss you to:
Right now, the above element doesn't have a set `height` or `width`, which means it will take its height from what ever inside of it and it will try to take `100%` of the width it can. We can modify both of these. However, if I say `width: 200px`, _what_ is `200px` wide? Unfortunately, the answer is it depends. It depends on what the value of the `box-sizing` property. By default, it does things the old way of writing code which if I say `width: 200px` I am _not including_ the `border` or the `padding`. This is annoying because if I'm trying to fit things together well, it's much easier to include `border` and `padding`. Remember how I told you to never use the wild card selector before? This is the one exception where I permit you to:

```css
* {
Expand Down