Beginning HTML5 and CSS3 For Dummies

15

Building with Boxes, Borders, and Buttons

In This Chapter

Working with the CSS box model

Positioning blocks

Aligning text

Indenting text

Creating buttons with CSS

Chapter 14 describes the difference between block and inline elements, and how to arrange both in the browser window. In this chapter, we go inside those elements to show you how to change the spacing between elements, change the spacing inside of elements, assign borders to elements, align the content of elements, and more!

Meeting the Box Model

As we show you in Chapter 14, each element in an HTML document is represented as a rectangular box. You also see how these boxes stack up depending on whether they’re inline or block-level elements. In this section, we talk about those rectangles and the ways in which you can change them using CSS.

Figure 15-1 shows what is known as the CSS box model.

The box model has four types of space, or to put it another way, four edges. These four spaces/edges are as follows:

Content: ...