HTML & CSS: Design and Build Websites

13

BOXES

• Controlling size of boxes
• Box model for borders, margin and padding
• Displaying and hiding

At the beginning of this section on CSS, you saw how CSS treats each HTML element as if it lives in its own box.

You can set several properties that affect the appearance of these boxes. In this chapter you will see how to:

• Control the dimensions of your boxes
• Create borders around boxes
• Set margins and padding for boxes
• Show and hide boxes

Once you have learned how to control the appearance of each box, you will see how to position these boxes on your pages in Chapter 15 when we look at page layout.

BOX DIMENSIONS

width, height

By default a box is sized just big enough to hold its contents. To set your own dimensions for a box you can use the height and width properties.

The most popular ways to specify the size of a box are to use pixels, percentages, or ems. Traditionally, pixels have been the most popular method because they allow designers to accurately control their size.

When you use percentages, the size of the box is relative to the size of the browser window or, if the box is encased within another box, it is a percentage of the size of the containing box.

When you use ems, the size of the box is based on the size of text within it. Designers have recently started to use percentages and ems more for measurements as they try to create designs that are flexible across devices ...