Web Programming with HTML5, CSS, and JavaScript

3.21 Element Box, padding Property, margin Property

In the previous section, you learned how to display a border around an element. Usually, borders have no gaps inside or outside of them. Sometimes that’s appropriate, but usually you’ll want to introduce gaps to make the elements look comfortable, not cramped. To introduce gaps around an element’s border, you need to take advantage of the element’s element box. Every web page element has an element box associated with it. As you can see in FIGURE 3.19, an element box has a border, padding inside the border, and a margin outside the border. For most elements, but not all, the default border, padding, and margin widths are zero. You can adjust the widths with the border-width, padding, and ...