Level 1 - Week 5

Transcript

1. </> wiggywebmasters.com
2. The CSS Box Model
3. Box model • Content area - where your text is • Padding - visible space around text • Border - visible space around padding • Margin - invisible space around border
4. Think jaffa cake! • Padding - the sponge • Border - the smashing orangy bit in the middle! • Margin - the chocolate topping (except it's not invisible !)
5. Margin p { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; } Shorthand p { margin: 10px 20px 10px 20px; }
6. Padding p { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } Shorthand p { padding: 10px 20px 10px 20px; }
7. Border p { border-top: 10px; border-right: 20px; border-bottom: 10px; border-left: 20px; } Shorthand p { border: 10px 20px 10px 20px; }
8. Even shorter shorthand p { margin: 10px 20px; padding: 10px 20px; border: 10px; } Rule-of-thumb Use the long form when you are only controlling 1 side - otherwise use the shothand forms
9. Border options p { border-width: 1px; border-style: solid; border-color: #FFFFFF; border-radius: 6px; } Shorthand p { border: 1px solid #FFFFFF; }
10. How to 'reset' the box model * { padding: 0; margin: 0; border: 0; } ! Improves rendering across different browsers, but means you need to add your own padding, margin and border