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

Maintaining margin aspect ratios

The margin values in your p rule are declared as pixel values; pixels are absolute units of measurement; and as such, the value is always maintained. Preview your external.html file in Firefox and use the Control++ keyboard shortcut to increase the text size. Repeat this process three times.

Figure 4. Increasing the text size

In Figure 4 you can see that the text has increased in size, quite dramatically. A careful look to the top and left will tell you that margins have remained unchanged; you have a 10 pixel margin to the top and a 20 pixel margin to the left. This often isn't the best way to set your margin values. While the margin values looked good when the text was at its default size, it is easy to see how crowded all your elements would become using this method.

Setting margins with EM units

Let's take a different approach to setting the margin values. This time you will use the EM unit of measurement. EM units are a relative size and as such, will be affected when a user resizes the text on your website.

Complete the following steps:

1. Press Control+F11 to open the CSS Panel.
2. Select the All button.
3. Go to the bottom pane.
4. Select your margin-top property.
5. Click the trash icon to remove it.
6. Select your margin-left property.
7. Click on the trash icon to remove it.
8. Scroll to the margin property.
9. Type: 2em into the value field.
10. Save your work.
11. View your page in Firefox.

Figure 5. You now have margins with a value of 2em on all sides

Your p rule now looks like that shown in Listing 3.

p {
    width: 200px;
    background-color: #FFFF00;
    border: 1px solid #000000;
    margin: 2em;
}

Listing 3. Relative em value margins

Continue with the following steps:

1. Add a second paragraph below the first in your external.html file.
2. Type: This is my second paragraph.
3. Save your work.
4. Preview your page in Firefox.

Figure 6. Paragraphs with relative margin values

With your page open, resize the text using the keyboard shortcut you learned earlier. Watch the margin widths between the paragraphs and between the paragraphs and the browser view-port. As the text is resized, you will notice that the margins grow as the text is made bigger. By the same token, they are made smaller if the text size is reduced. Using this method of setting margin values ensures that your web pages stay in proportion when a user resizes the text to suit his or her needs.

Conclusion

In this article you have learned about margins and padding, and you have seen how they can affect your elements in different ways. You have also seen how by using absolute and relative values on the margin property you can make your margins react differently to text resizing from your users. No doubt there will be times when you won't want your margins to be relative so it is important that you consider the roll of each element before deciding whether to flexible or fixed margin values.

In part four of this series you will begin to learn about class selectors, how to use them, and how to define them from within the Dreamweaver CSS panel.

Page 3 of 3

Previous Page