box model complete

Markdown/TheOdinProjectNotes.md

@@ -770,4 +770,53 @@ p {
 2. Remember the Recipe page you created as practice from the previous lesson? Well, it’s rather plain looking, isn’t it? Let’s fix that by adding some CSS to it!
    1. How you actually style it is completely open, but you should use the external CSS method (for this practice and moving forward). You should also try to use several of the properties mentioned in the section above (color, background color, typography properties, etc). Take some time to play around with the various properties to get a feel for what they do. For now, don’t worry at all about making it look good. This is just to practice and get used to writing CSS, not to make something to show off on your resume, so feel free to go a little crazy for now.
    2. We haven’t covered how to use a custom font for the `font-family` property yet, so for now take a look at [CSS Fonts](https://www.w3schools.com/Css/css_font.asp) for a list of generic font families to use, and [CSS Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp) for a list of fonts that are web safe. Web safe means that these are fonts that are installed on basically every computer or device (but be sure to still include a generic font family as a fallback).
-   
+## [The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
+- Most important skills with CSS are ***positioning*** and ***layout***
+  - It's important to be able to put things on a page exactly where you want them to be
+- The box model refers to everything on the web being a rectangular box
+  - There can be boxes within boxes, but they are all still boxes
+- In order to easily see the boxes, you can use a border to view them 
+```CSS
+* {
+  border: 2px solid red;
+}
+```
+- ![](images/capture7.png)
+- There are three main ways to position elements within the rectangles
+- Each layer can have its own color
+```CSS
+.box-one {
+  background-color: #EB5757;
+  padding: 20px;
+  border: 20px solid #9B51E0;
+}
+```
+- ![](images/capture9.png)
+  - `padding` increases the space between the border of a box and the content of the box.
+    - Most used for buttons to separate the text from the border
+  - `margin` increases the space between the borders of a box and the borders of adjacent boxes.
+    - Most used to add spacing between elements
+    - This collapses between boxes, meaning if two adjacent boxes both have a margin of 60px; the space between them will not be 120px, it will remain 60px
+    - Uses lengths, percentages, or the keyword auto and can have negative values.
+    - [margin-CSS-Tricks](https://css-tricks.com/almanac/properties/m/margin/)
+  - `border` adds space (even if it's only a pixel or two) between the margin and the padding
+    - Most used to emphasize a section of the screen
+  - ![](images/capture8.png)
+  - Both `margin` and `padding` are taken into account when calculating the `height` of a box, meaning that even if the height of the element is set to 100px, the posted height will be 100px + the other two attributes
+    - By using `box-sizing: border-box`, we can make the `height` and `width` parameters be absolute, so the `padding` and `margin` will be within the predefined parameters.
+### Knowledge check
+- From inside to outside, what is the order of box-model properties?
+  - padding --> border --> margin
+- What does the `box-sizing` CSS property do?
+  - It makes the height and width absolute and forces all attributes within the box
+- What is the difference between the standard and alternative box model?
+  - The difference is that the standard box model does not include the `padding` and `margin` into the height of the box
+  - The alternative model uses the `box-sizing: border-box` syntax and forces all attributes within the height of the box
+- Would you use `margin` or `padding` to create more space between 2 elements?
+  - You would use `margin` as it affects the outside of the box
+- Would you use `margin` or `padding` to create more space between the contents of an element and its border?
+  - You would use `padding` as it creates more space between the text and the border
+- Would you use `margin` or `padding` if you wanted two elements to overlap each other?
+  - You would use `margin` since it's the space between elements and it can also be negative space.
+### Block and Inline
+-