C H A P T E R 6
(^)
Box Model Properties
This chapter shows how box model properties style the various types of boxes. These are basic design
patterns.
The Margin, Border, and Padding design patterns contain examples contrasting how each property
works in each type of box. Their main purpose is to contrast in one place how the same property means
different things in different contexts. When using this book as a reference, you may also want to refer to
the Margin, Border, and Padding design patterns to determine which type of element, box, and property
will do what you want.Chapter Outline
- Margin contrasts how margins work differently for different types of boxes. It
shows how margins change the position of an element in relation to its container
and siblings. - Border contrasts how borders work differently for different types of boxes. It
shows how borders change the position of an element in ways similar to margins,
and in some ways different from margins. - Padding contrasts how padding works differently for different types of boxes. It
shows how padding works almost identically to borders and margins. - Background shows how to assign a color to the background of an element. It also
shows how to use a tiled image for the background. You can tile the image across
and down, across only, or down only, or show the image only once. You can
position the image at a specific location in the background. You can also direct
whether the image scrolls with the content or remains in a fixed location. - Overflow shows how to hide overflowing content, display it, or display scrollbars.
- Visibility shows how to hide an element while leaving a placeholder for it in the
flow. - Page Break shows how to insert a page break into your document before an
element or after an element. It also shows how to print blank pages.