Embedded Files
Home > Chapter Review and Exercises > Chapter 14 The Element Box
Summary
Summary
Chapter 14 covers all the box-related properties from the inside out: content dimensions, padding, borders, and margins. In addition, it looks at outlines, display roles, and drop shadows. Understanding the parts of the element box is an important first step to using CSS for page layout. Element widths and margins play a particularly large role in layout, so be sure they are mastered before moving on.
Takeaways
Takeaways
In Chapter 14, you will learn the following:
The components of an element box: content area, inner edge, padding area, border, margin area, and outer edge.
How to specify box dimensions (width and height properties).
The difference between the content-box and border-box models for specifying element dimensions.
Using the overflow values to specify what happens when content doesn’t fit inside its box.
Using the padding properties to specify an amount of space between the content and the border or inner edge.
Using the border properties to add a border on one or more sides of an element.
The convention for providing values for a shorthand property in a clockwise direction starting at the top: top, right, bottom, left (the mnemonic “TRouBLe” can help you remember).
Making corners curved with the border-radius property.
Adding margins on the outside of an element with the collection of margin properties.
How neighboring top and bottom borders collapse instead of accumulating. Only the largest margin value is applied.
How to assign a display type to elements to affect how they participate in the page layout.
Adding soft drop shadows under element boxes.
Key terms in Chapter 14
Key terms in Chapter 14
box model
A system in which every element in a document generates a rectangular box to which properties such as width, height, padding, borders, and margins can be applied.
content area
The space that contains the content of the element.
inner edge
The edges of the content area.
padding
The area between the content area and an optional border.
border
A line (or stylized line) that surrounds the element.
margin
An optional amount of space added on the outside of the border.
outer edge
The outside edges of the margin area form the outside edge of the element box.
visible element box
The content, padding, and border (if there is one).
replaced elements
HTML elements that get replaced by other external resources (such as an image).
non-replaced elements
Elements that appear in the HTML source (like text).
content-box model
A method for sizing an element by applying width and height properties to the content box only. Padding and border dimensions are additional.
border-box model
A method for sizing an element that applies width and height properties to the visible box (including the padding and border).
outline
An outline is like a border, but it is not calculated in the width of the element box, but rather lays on top of the rendered element.
collapsing margins
Top and bottom margins overlap, and only the larger margin height is used (i.e., they are not additive).
display types
Defines the type of element box the element generates and how it participates in the page layout, for example: inline, block, table, hidden.
Exercises in Chapter 14
Exercises in Chapter 14
14-1: Adding a little padding
This is the first of a series of exercises that make improvements to the Black Goose Bakery page using box model properties. In this exercise, dimensions and padding are added to various elements on the page. It also provides an opportunity to work with an external style sheet.
14-2: Border tricks
This exercise lets readers try out borders and border-radius properties on the bakery page.
14-3: Adding margin space around elements
Margins are adjusted around individual elements on the bakery page as well as around the edges of the page itself.
Test Yourself
Test Yourself
At this point, you should have a good feel for element boxes and how to manipulate the space within and around them. In the next chapter, we’ll start moving the boxes around on the page. But first, here is some practice at writing rules for padding, borders, and margins.
In this test, your task is to write the declarations that create the effects shown in each example shown below. All the paragraphs shown here share a rule that sets the dimensions and the background color for each paragraph. You just need to provide the box-related property declarations.
USEFUL HINTS:
The outer margin edges are indicated by dotted blue lines.
All necessary measurements are provided in blue.
Borders are either black or red.
A.
B.
C.
D.
E.
F.
Additional Supplemental Resources
Additional Supplemental Resources
2. Some Online Tutorials you can check out
2. Some Online Tutorials you can check out
Report abuse