09. Margins and Padding

Okay, the underlying structure of our website is now solid. This is the point where we can start to make it a bit more visually appealing and even start adding content. The first thing we’ll do is alter the margin and padding of each major container so our page looks a bit like this:

You can surely see the structure of our web page coming together now! In order to achieve this effect we need to spend some time altering the padding and margin.

If you add padding to a rule, that space is added inside the item it applies to but also extends it’s width. So here is an alteration to our “container” rule:

.container {
   padding          : 5px 5px 5px 5px;
   width            : 950px;
   margin           : 0px auto 0px auto;

Notice that the width of “container” might say 950 but if I’ve added a 5 pixel padding all the way around this block then “container” is “5 + 950 + 5 = 960 pixels” in actual width!

If you add a margin to a rule then this space is added outside the item it applies to but also extends it’s width. So here’s an alteration to our “site-header” rule:

.site-header {
   margin           : 0px 0px 5px 0px;
   padding          : 15px 15px 15px 15px;
   background-color : #f5bca9;

In this case, the space is added outside the object and puts the specified buffer between it and anything else next to it.

So with all that in mind…let’s see how you go at altering your style sheet so that your items have appropriate margins and paddings. Something for you to note before you start though:

  • There is more than one way to skin a cat: Don’t think that this can only be done one way, I could add 5 pixels to the top of “footer” or to the bottom of “section“. Both work and as long as you achieve the effect you’re after, your way is correct!

If you really get stuck with this bit then feel free to ask questions below but be sure to spend some time getting your page looking exactly the way you want it. Web design is all about perfection so practising now will be of benefit later!

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>