-
Notifications
You must be signed in to change notification settings - Fork 13.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update lists to match TOP markdown standard
- Loading branch information
1 parent
e6bd40c
commit 3d42c8b
Showing
1 changed file
with
16 additions
and
16 deletions.
There are no files selected for viewing
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 |
---|---|---|
|
@@ -8,8 +8,8 @@ Learning to position elements on a webpage is not that difficult once you unders | |
|
||
This section contains a general overview of topics that you will learn in this lesson. | ||
|
||
* You'll learn all about _the box model_. | ||
* You'll learn how to make sure elements are just the right size with `margin`, `padding`, and `borders`. | ||
- You'll learn all about _the box model_. | ||
Check failure on line 11 in foundations/html_css/css-foundations/the-box-model.md GitHub Actions / Lint lesson filesEmphasis style
Check failure on line 11 in foundations/html_css/css-foundations/the-box-model.md GitHub Actions / Lint lesson filesEmphasis style
|
||
- You'll learn how to make sure elements are just the right size with `margin`, `padding`, and `borders`. | ||
|
||
### The box model | ||
|
||
|
@@ -33,9 +33,9 @@ OK, so there might be some circles in the above image... but when it comes to la | |
|
||
The only real complication here is that there are many ways to manipulate the size of these boxes, and the space between them, using `padding`, `margin`, and `border`. The assigned articles go into more depth on this concept, but to sum it up briefly: | ||
Check failure on line 34 in foundations/html_css/css-foundations/the-box-model.md GitHub Actions / Lint lesson filesTrailing spaces
|
||
|
||
* `padding` increases the space between the border of a box and the content of the box. | ||
* `margin` increases the space between the borders of a box and the borders of adjacent boxes. | ||
* `border` adds space (even if it's only a pixel or two) between the margin and the padding. | ||
- `padding` increases the space between the border of a box and the content of the box. | ||
- `margin` increases the space between the borders of a box and the borders of adjacent boxes. | ||
- `border` adds space (even if it's only a pixel or two) between the margin and the padding. | ||
|
||
Be sure to study the diagrams carefully. | ||
|
||
|
@@ -46,26 +46,26 @@ Be sure to study the diagrams carefully. | |
<div class="lesson-content__panel" markdown="1"> | ||
|
||
1. [This video](https://www.youtube.com/watch?v=rIO5326FgPE) is a straightforward overview of the box model, padding and margin. Go ahead and watch this now; it informs everything else. | ||
2. Because the box model concept is so incredibly fundamental, let's dig a bit deeper with [this lesson from MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model). It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor! | ||
3. [This CSS Tricks page](https://css-tricks.com/almanac/properties/m/margin/) has some further information about the `margin` property that you'll find useful. Specifically, the sections about `auto` and margin collapsing contain things you'll want to know. | ||
1. Because the box model concept is so incredibly fundamental, let's dig a bit deeper with [this lesson from MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model). It covers the same material as the video above and will introduce you to inline boxes that we will explore in the next lesson. Pay close attention to the examples and take the time to experiment with their in-browser editor! | ||
1. [This CSS Tricks page](https://css-tricks.com/almanac/properties/m/margin/) has some further information about the `margin` property that you'll find useful. Specifically, the sections about `auto` and margin collapsing contain things you'll want to know. | ||
|
||
</div> | ||
|
||
### Knowledge check | ||
|
||
This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to. | ||
|
||
* [From inside to outside, what is the order of box-model properties?](#the-box-model) | ||
* [What does the `box-sizing` CSS property do?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_alternative_css_box_model) | ||
* [What is the difference between the standard and alternative box model?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_alternative_css_box_model) | ||
* [Would you use `margin` or `padding` to create more space between 2 elements?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#margins_padding_and_borders) | ||
* [Would you use `margin` or `padding` to create more space between the contents of an element and its border?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#margins_padding_and_borders) | ||
* [Would you use `margin` or `padding` if you wanted two elements to overlap each other?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#margins_padding_and_borders) | ||
* [How do you set the alternative box model for all of your elements?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_alternative_css_box_model) | ||
* [How do you center an element horizontally?](https://css-tricks.com/almanac/properties/m/margin/#aa-auto-and-centering) | ||
- [From inside to outside, what is the order of box-model properties?](#the-box-model) | ||
- [What does the `box-sizing` CSS property do?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_alternative_css_box_model) | ||
- [What is the difference between the standard and alternative box model?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_alternative_css_box_model) | ||
- [Would you use `margin` or `padding` to create more space between 2 elements?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#margins_padding_and_borders) | ||
- [Would you use `margin` or `padding` to create more space between the contents of an element and its border?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#margins_padding_and_borders) | ||
- [Would you use `margin` or `padding` if you wanted two elements to overlap each other?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#margins_padding_and_borders) | ||
- [How do you set the alternative box model for all of your elements?](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_alternative_css_box_model) | ||
- [How do you center an element horizontally?](https://css-tricks.com/almanac/properties/m/margin/#aa-auto-and-centering) | ||
|
||
### Additional resources | ||
|
||
This section contains helpful links to related content. It isn’t required, so consider it supplemental. | ||
|
||
* For a more interactive explanation and example, try this [Scrim on the box model](https://scrimba.com/scrim/cof3d488184abe24ec6258ab4). | ||
- For a more interactive explanation and example, try this [Scrim on the box model](https://scrimba.com/scrim/cof3d488184abe24ec6258ab4). |