The CSS Box Formatting Model - HTML

CSS uses a clever metaphor for helping you specify containers (block-level elements) on your page: the box. When you define formatting for your block-level elements—whether they be paragraphs, blockquotes, lists, images, or whatever—for purposes of CSS, you are defining formatting for a box. CSS doesn’t care what is in the box; it just wants to format the box.

Box dimensions
The first thing the browser does is render the block-level element to determine what the physical dimensions of the element are, given the font selected for the element, the contents of the element, and any other internal formatting instructions supplied by the style sheet. Then the browser looks at the element’s padding, the border, and the margins to determine the space it actually requires on the page. Representation of how these measures relate to one another.

A visual representation of how margins, borders, and padding relate to each other and the element they affect.

A visual representation of how margins, borders, and padding relate to each other and the element they affect.

Padding is the distance between the outside edges of the element and the border. The border is a line or ridge. The margin is the distance between the border and the outer box of the next container. How you define the padding, border, and margin is described in detail in the following sections.

You don’t need to define any padding, but if you are going to define a border, then you probably want to define padding so your element doesn’t look too crowded. The default for an element is no padding. Ssame table with and without padding. You can see that the one without padding looks crowded.

Tables with (bottom) and without padding (top).

Tables with (bottom) and without padding (top).

Five properties are associated with padding. They are as follows:

1. padding, which gives the same padding on all sides
2. padding-top
3. padding-right
4. padding-bottom
5. padding-left

Get used to seeing the -top, -right, -bottom, and -left additions to property names. This is how all box-related properties are specified. Suppose you want to define your paragraphs to have padding on the top, the left, and the right; you could use the following style sheet:

p { padding-top: 10px; padding-right: 10px; padding-left: 10px; }

Tip: Notice the liberal formatting of the style definitions in this section. As with other HTML coding, you will find it helpful to format your style definitions with liberal white space, namely line breaks and indents. Or, you could use shorthand to write out the padding properties, as follows:

p { padding: 10px 10px 0px 10px; }

You can always string the top, right, bottom, and left properties together in that order. The same shorthand works for margins and borders. Notice that no commas are used between the items in the list.

The default is to have no border on elements. You can define a border in two different ways. Either you can define the width, color, and style of the border by side, or you can define the width, color, and style for the box individually. Two examples follow:

blockquote { border-width: 1pt 1pt 0pt 1pt; border-color: black; border-style: solid; }

The previous example creates a black, solid border for the top, right, and left sides of the list.

blockquote { border-top: 1pt solid black; border-right: 1pt solid black; border-left: 1pt solid black; }

Both these examples create the same border. The border is inserted between the padding, if there is any, and the margin, if there is any. Valid values for border style are as follows:

✦ none
✦ dotted
✦ dashed
✦ solid
✦ double
✦ groove
✦ ridge
✦ inset
✦ outset

Or, if you want to create a border that is the same on all four sides, you can use the border property:

blockquote { border: 1pt solid black; }

Margins create white space outside of the border. Notice in Figure 26-2 that the two tables are immediately adjacent to each other. This is because neither one has margins. Margins are created with the margin, margin-top, margin-right, margin-bottom, and margin-left properties. They work exactly the same as the padding property described in the previous section

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics