The book covers material here at the end of Ch. 18 and start of Ch. 19.
The organization differs.
- An HTML page is made up of boxes.
- The body is a box.
- Divs and paragraphs are boxes.
- Many other elements make boxes.
- Boxes have contents, but some other parts as well.
The Margin Area
The Border Area
The Padding Area
- The padding and margins are just space.
- The border is a line that may have a color or a pattern.
- If the contents has a background color, it extends into the padding area
- The margin area is transparent.
- The contents might text (e.g. the contents of a a paragraph), or
another box, or all sorts of combinations.
- The size of the box
- The height and width properties apply to the height and width of the content area, and the
other things take additional space.
- This is kind of a pill when you want to make a box which is the full width of its container,
since width: 100% won't leave room for any padding, margins or border.
- In CSS3, you can say box-sizing: border-box, which means the size is applied to
the border area. Much better for fitting tightly into your containiner.
- Setting margins.
- Set all margins: margin: dimension
- Set sides individually: margin−left: dimension,
margin−bottom: dimension, margin−right: dimension
- Any of the previously mentioned dimensions may be used. Percentages are of enclosing
- Setting padding.
- Set all margins: padding: dimension
- Set sides individually: padding−left: dimension,
padding−bottom: dimension, padding−right: dimension.
- No collapse in padding; only in margins (and only vertically).
- Setting the border.
[ Box Model Source ]
- Three properties: width,
- Four sides, which can have their borders set differently.
- Several bajillion attributes that can set different combinations of these.
- border: 2px dashed green: Set them all at once.
- border-top-style: dotted: Set the style of the top border.
- border-width: 3pt: Set the width of all borders.
3pt solid blue
2px dashed green
6pt dotted orange
1em green outset
5px ridge #ffeedd
5pt brown double
- Styles include none to turn off the border, and hidden to make it take up space,
but not appear.
- Widths include all the usual dimensions, plus thin, medium and thick.
- There is a newer (CSS3) border-radius propery which allows for
- border−radius: dimension,
border−top−left−radius: dimension, etc.
- The dimension is the radius of the quarter-circle that will
replace the sharp corner. The larger, the less sharp the curve.
- Can set all corners the same, or vary, which may create some
- Margin collapse.
[ Border Collapse Source ]
- When two boxes are stacked, they are separated by the larger of the margins.
- When two boxes are adjacent left to right, they are separated by the
sum of their margins.
- I didn't make that up, and it's not my fault.