Join Laurie Burruss for an in-depth discussion in this video Applying padding and margins, part of Creating a CSS Style Guide: Hands-On Training.
- View Offline
Although it's beginning to look more page-like and more like a style guide that…we might show around our team, it's still too tight. We have no negative and…positive space. We really need to talk about margins and padding.…It's confusing to beginners, it's even confusing to people who have been doing it a…long time, but as you can see, the box is clearly evident. If I add margins,…that will add space or push away from the box. Think of your hand going out to…the side and pushing someone away.…
If I add padding, it goes inside the box, so think of taking your hands and…holding yourself tightly. It goes away from the inside edge. For instance,…if we are shipping something with FedEx, we would put padding inside in the box.…That's the way I think of it. I really do literally think of it as sort of like…packing a box, things outside the box and inside the box. I'll say it one more time. …Pushing away outside the box, margin; putting something inside the box…would be padding and pushing away from the inside edge of that box.…
Download the exercise files from the Exercise Files tab.
- Planning a site from a blank file
- Creating and editing a style guide with just HTML
- Using the Property Inspector for text markup
- Inserting images, tables, and footers for a custom look
- Creating and editing an external CSS style sheet
- Building a custom color palette for a site
- Testing web pages in various browsers
- Styling tips for professional sites