Padding, Borders, Outlines, and Margins

Chapter 7

Figures

  1. The CSS box model
  2. Adding padding to elements
  3. The effect of padding on bordered block-level elements
  4. Mixed-value padding
  5. Value-replication pattern
  6. Using padding instead of margins
  7. More than one single-side padding
  8. Logical padding
  9. Padding, percentages, and the widths of parent elements
  10. Mixed padding
  11. Top padding on an inline nonreplaced element
  12. An inline nonreplaced element with left padding
  13. An inline nonreplaced element with 25-pixel side padding
  14. An inline nonreplaced element with 25-pixel side padding displayed across two lines of text
  15. Padding replaced elements
  16. Padding replaced elements
  17. Border styles
  18. Two valid ways of rendering inset
  19. Applying an outset border to a hyperlinked image
  20. Two outset borders
  21. Equivalent style rules
  22. Removing the left border
  23. Logical border styles
  24. The relation of border-width keywords to each other
  25. Value replication and uneven border widths
  26. Borders have many aspects
  27. Border colors based on the element’s foreground and the value of the border-color property
  28. Using transparent borders
  29. Setting a bottom border with a shorthand property
  30. Very complex borders
  31. Dashing across the top of an element
  32. A really short border declaration
  33. Using the cascade to your advantage
  34. Borders on inline nonreplaced elements
  35. Inline nonreplaced elements with inline-start borders
  36. Borders on inline replaced elements
  37. How border radii are calculated
  38. How percentage border radii are calculated
  39. A variety of rounded corners
  40. Elements with rounded corners are still boxes
  41. Elliptical corner rounding
  42. Different elliptical rounding calculations
  43. Rounded corners up close
  44. Links shaped like word balloons
  45. Rounding the block-start, inline-end corner
  46. Defining a border image’s source
  47. Various slicing patterns
  48. An all-around image border
  49. Various patterns that prevent side slices
  50. Number slicing
  51. Slice-lines at 25 pixels
  52. Using the fill slice
  53. Uneven border image widths
  54. Placing slice-lines for the border image’s width
  55. A border with and without its border image
  56. Placement of percentage slice-lines
  57. Various numeric border image widths
  58. Creating an image border overhang
  59. Various image-repeat patterns
  60. A variety of space repetitions
  61. A simple plaque effect and its older-browser fallback
  62. A wavy border
  63. The background area, visible through the image border
  64. Various outline styles
  65. Various outline widths
  66. Various outlines
  67. Outline over margin
  68. Overlapping outlines
  69. Discontinuous and nonrectangular outlines
  70. Paragraphs with, and without, margins
  71. Setting a margin for h1 elements
  72. Mixed-value margins
  73. Parent widths and percentages
  74. Collapsing margins
  75. Margins collapsing with parents
  76. Margins collapsing with parents, revealed
  77. Negative margins in action
  78. Punching out of a parent
  79. An inline nonreplaced element with an inline-start margin
  80. An inline nonreplaced element with 25-pixel side margins
  81. An inline nonreplaced element with 25-pixel side margin displayed across two lines of text
  82. An inline nonreplaced element with a negative margin
  83. Inline replaced elements with differing margin values