Basic Visual Formatting

Chapter 6

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 in two different writing modes
  5. The block and inline axis directions for three common writing modes
  6. Sizing elements along their inline axis
  7. Content sizing
  8. Minimum content sizing
  9. Fit-content sizing
  10. Maximum block sizing
  11. Sizing elements’ width
  12. Heights and widths
  13. The effects of box-sizing
  14. The seven properties of block-axis formatting, and which can be set to auto
  15. Auto block sizes with block-level children
  16. Percentage block sizes in different circumstances
  17. Block-axis sizing and placement in detail
  18. Methods for overflowing content
  19. Setting overflow separately for x and y
  20. The effects of a negative top margin
  21. The effects of a negative block-end margin
  22. Collapsed versus uncollapsed margins
  23. Collapsing in detail
  24. Collapsing (or not) with borders added to the mix
  25. Examples of negative block-axis margins
  26. Collapsing margins and negative margins, in detail
  27. Additive padding and margin
  28. Subtractive padding
  29. Element boxes are as wide as the width of their containing block
  30. The seven properties of inline-axis formatting, and which can be set to auto
  31. Overriding the inline-end margin’s value
  32. Automatic inline sizing
  33. Setting an explicit inline size
  34. What happens when both the inline size and inline-start margin are auto
  35. Offset is implicit in the parent’s margins and padding
  36. Wider children through negative margins
  37. Setting a negative inline-start margin
  38. Changing replaced element inline sizes
  39. Markers inside and outside the list
  40. A gallery with and without aspect ratios defined
  41. A single-line inline element
  42. A multiple-line inline element
  43. Showing lines in different alignments and writing modes
  44. Em boxes determine content area height
  45. Content area plus leading equals inline box
  46. Inline boxes within a line
  47. Line boxes within a paragraph
  48. Vertical alignment affects line box height
  49. Aligning an inline element to the line box
  50. Text protruding from the line box (again)
  51. Assigning the line-height property to inline elements
  52. Increasing line-height to leave room for inline borders
  53. Using a scaling factor for line-height
  54. Padding and borders do not alter line-height
  55. Padding and margins on inline elements
  56. Sliced and cloned inline fragments
  57. Replaced elements can increase the height of the line box but not the value of line-height
  58. Adding padding, borders, and margins to an inline replaced element increases its inline box
  59. The effect of negative margins on inline replaced elements
  60. Inline replaced elements sit on the baseline
  61. Pulling inline replaced elements down with a negative bottom margin
  62. The behavior of an inline-block element
  63. Autosizing of an inline-block element
  64. A regular unordered list, and one with display: contents
  65. Making elements invisible without suppressing their element boxes