Padding, Borders, Outlines, and Margins

Chapter 8

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