CSS design basics with Dreamweaver – Part 3: Margins and padding

Understanding margins and padding

Margins and padding affect your designs in different ways. However, the difference in the two can be a little confusing if you're new to CSS. You may well have already used these CSS properties and consider them to be interchangeable in that your results seem to differ very little no matter whether the value is set against the margin or the padding property. To understand the difference you must understand how the box model is implemented. You'll begin this learning curve with the external.html file you worked on in part two. The external.html file is also included in the download files for this tutorial and is at the point of completion from part two.

Also included within the sample files linked from the beginning of this article is the test.css file. This file includes the CSS rules as shown in Listing 1.

body {    
    color: #003366;
    margin: 0px;
}

p {
    margin-top: 10px;
    width: 200px;
    margin-left: 20px;
    background-color: #FFFF00;
    border: 1px solid #000000;
}

Listing 1. The test.css file

At this moment in time you are only concerned with the p rule, and particularly the margin-top and margin-left properties. If you preview your external.html page in Firefox it looks like Figure 1.

Figure 1. A browser preview showing the effect of the CSS in Listing 1

You are now going to make a couple of changes to your test.css file. Leave the browser open and your external.html file displayed. Use Control + F11 to open the CSS panel and complete the following steps as shown in Figure 2:

Figure 2. The CSS Panel

1. Select the All button.
2. Expand the Box section.
3. Click on the margin-top property.
4. Click the trash icon to delete it.
5. Select the margin-top property.
6. Click on the trash icon to delete it.
7. Scroll to the padding-top property.
8. Set it to 10px.
9. Scroll to the padding-left property.
10. Set it to 20px.

To ensure your CSS rules react as you would expect, I like to add a zeroing selector to the top of all my style sheets. You'll complete this by hand now. Open your test.css file and make a little room at the top above the body rule and add the rule shown in Listing 2.

* {
    margin: 0;
    Padding: 0;
}

Listing 2. The zeroing selector

Note: When setting a zeroing selector, you must specifically set margin and padding values against all elements that require them.

With your changes in place and your CSS file saved, you can now refresh your external.html file, which should be open in your browser window. Watch the position of the text very carefully as you refresh. You will see that although the yellow background changes position, the text doesn't move at all.

Figure 3. The refreshed external.html file

You can see in Figure 3 that the p element—highlighted by the yellow background color—has moved. It now touches the browser view-port on both the top and left edges. This is because you have removed the margin-top and margin-left values thereby allowing the p element to move tight into the top left corner of the body element. The addition of the padding-top and padding-left values move the text down and to the left within the p element, effectively setting the text into the same position as it was before the margin values were removed.

In this example you have seen how elements can be positioned using either margin or padding values, but the two methods are very different. If you removed the background-color and border from the p rule you would be hard pressed to tell how the text had been positioned without looking at the CSS file to check the property and value pairs. If you want to position an element, do so with the use of the margin properties. Use padding for positioning within the element.

Although the element you have been working on is a p element the box model still applies. Add a comment above the doc type as you did in part one of this series and view your page again, but this time view it in IE6 or even IE7, which has the same problem. You'll notice that as you have a width of 200 pixels set as a width for the p element that box model is incorrectly calculated and the width is not what it should be. Remove the comment and refresh your page in IE and you will see the page display correctly and your p elements width is now correctly calculated and displayed.

Change your CSS file back to how it appeared in Listing 1 by changing the padding-top and padding-left properties back to margin-top and margin-left. Your CSS and external.html files are now be exactly as they were when you commenced this tutorial.

Page 2 of 3

Previous Page

Next Page