1. The Box Model

2. What’s a Box? Any HTML Element Box can be “drawn” around it
<p>This is my text</p>
This is my text

3. Overview

4. Content Area Space taken up by content itself
Content can have a specific width set to it
Can be in either px or % (% of parent element)
Example:
h1{
width: 300px; }

5. Content Area -> More
Content can have height set on it
If you have more than fits in that height, must decide what to do with overflow – or it will bust past your borders

6. Content Area -> More
overflow: hidden;
Simply won’t show parts that won’t fit
overflow: scroll;
Picks up scroll bars on both directions
overflow:auto
Picks up scroll bars only if it needs them and only in direction it needs them

7. Content Area -> More
Additional width & height controls
max-height
Allows to be smaller, but can’t expand past this
min-height
Allows to be larger, but can’t shrink past this
max-width
min-width

8. Padding Defines space between content area and border
Will take on background color of content if it has color
Can apply all around
Or just to certain side

9. Padding -> More Control sides individually: Combined versions:
padding-top: amt;
padding-right: amt;
padding-bottom: amt;
padding-left: amt;
Combined versions:
padding: amt;
Applies same amount to all 4 sides

10. Padding -> More Shorthand Versions padding: amt1 amt2;
1st number = top & bottom
2nd number = left & right
padding: amt1 amt2 amt3;
1st number = top
3rd number = bottom
padding: amt1 amt2 amt3 amt4;
2nd number = right
4th number = left
Same order as a CLOCK

11. Border Outlines visible portion of element
Can apply style, thickness, and color to it
Can apply all around
Or just to certain side

12. Border -> More Available Values for Borders
border-color: color value;
border-width: thin | medium | thick | amt in px
border-style: dotted | dashed | solid | double | groove | ridge | inset | outset
Can control independently
ex: border-top-color:#f00;

13. Border -> More Shorthand Version Combined Versions
border-top: color width style;
Combined Versions
Ex:
border: 2px #f00 dotted;
Applies to all borders

14. Margin Completely invisible No background color
Will not obstruct elements behind it
Can apply all around
Or just to certain side

15. Margin -> More Units = px or % (% of container)
Control independently (just like padding)
margin-left, etc.
Control in same combinations as padding with 1, 2, 3, or 4 values representing different sides
Special value: auto
Makes elements whose widths do not take up the entire page move to the middle!

16. Only applies to Content Area!
Setting Dimensions
Only applies to Content Area!
Element{ width: 200px; border: 10px solid #99c; padding: 20px; margin: 20px; }
Whole Rigmarole Consumes 300 px!
20px margin
20px margin
240px
200 content +
20 padding +
20 padding
10px
border
10px
border

17. Total Width Content area width + Left padding + Right padding +
Left margin +
Right margin+
Left border +
Right border
If aiming for a specific width, need to take into account all values

18. Quirk with Margins If stacked – top & bottom margins collapse together
Will use value for larger margin when this happens.