Basic Visual Formatting

Chapter 7

Figures

  1. The content area and its surroundings
  2. Changing the display role from inline to block
  3. Changing the display role from list-item to inline
  4. The complete box model
  5. The effects of box-sizing
  6. Additive padding and margin
  7. Subtracted padding
  8. Element boxes are as wide as the width of their containing block
  9. The “seven properties” of horizontal formatting
  10. Horizontal properties that can be set to auto
  11. Overriding the margin-right setting
  12. Automatic width
  13. Setting an explicit width
  14. What happens when both the width and right margin are auto
  15. Offset is implicit in the parent’s margins and padding
  16. Wider children through negative margins
  17. Setting a negative left margin
  18. Changing replaced element widths
  19. Offset is implicit in the parent’s margins and padding
  20. The “seven properties” of vertical formatting
  21. Vertical properties that can be set to auto
  22. Percentage heights in different circumstances
  23. Auto heights with block-level children
  24. Collapsed versus uncollapsed margins
  25. Collapsing in detail
  26. Collapsing (or not) with borders added to the mix
  27. Examples of negative vertical margins
  28. The effects of a negative top margin
  29. The effects of a negative bottom margin
  30. Collapsing margins and negative margins, in detail
  31. The content of list items
  32. Markers inside and outside the list
  33. A single-line inline element
  34. A multiple-line inline element
  35. Showing lines in different alignments
  36. Em boxes determine content area height
  37. Content area plus leading equals inline box
  38. Inline boxes within a line
  39. Line boxes within a paragraph
  40. Vertical alignment affects line box height
  41. Aligning an inline element to the line box
  42. Text protruding from the line box (again)
  43. Assigning the line-height property to inline elements
  44. Increasing line-height to leave room for inline borders
  45. Using a scaling factor for line-height
  46. Inline borders and line-box layout
  47. Padding and borders do not alter line-height
  48. Padding and margins on the ends of an inline element
  49. Overlapping inline backgrounds
  50. Sliced and cloned inline fragments
  51. Replaced elements can increase the height of the line box but not the value of line-height
  52. Adding padding, borders, and margins to an inline replaced element increases its inline box
  53. The effect of negative margins on inline replaced elements
  54. Inline replaced elements sit on the baseline
  55. Pulling inline replaced elements down with a negative bottom margin
  56. The behavior of an inline-block element
  57. Autosizing of an inline-block element
  58. A regular unordered list, and one with display: contents