HTML and CSS [Electronic resources] نسخه متنی

Chapter 11. Margins, Borders, and Padding

One of the coolest things about CSS is that you can style features such as margins, borders and padding. It's not even just being able to style such things that I find so exciting, but the flexibility we have with the styles available.

Consider that

all elements have a margin, a border, and padding within the CSS visual model. The reason for this is that every element creates a box. Two types of boxes exist: block boxes (related to block-level elements) and line boxes (related to inline boxes). Figure 11-1 shows the difference.

I've added a light gray background color to help with the visualization of block and line boxes. The H2 header is a block box. It runs the width of the available browser space (width can control this) and is followed by a line break after the block terminates at the right edge. The line box is demonstrated by a link and sits inline with the surrounding text. You can see how its edges run as close to the content as possible.

By tapping into the CSS visual model, which is referred to as the

Box Model , you can add styles to various portions of the box. I'll show you the Box Model in the following section of this chapter so you can see exactly how the Box Model works, but the point now is that you can style not just all sides of a given box, but also specific sides of that box.

Margins give you the capability to control the box's margins in both positive and negative values. Borders enable you to style the box's border using a range of predefined border styles, and padding enables us to add padding to the box (much like adding cellpadding to a table). Being able to style these aspects of any element is one of the reasons CSS is far more powerful than any formerly available technology in terms of being able to style your pages with great control.