Exercise 2: Padding Box and Border Box, Fully Worked — Possible Solution
====================================================================

THE TEST
------------------------------
    content = Rect(0, 0, 200, 100)
    padding = expand_shorthand('4px 8px 12px 16px')  -> EdgeSizes(top=4, right=8, bottom=12, left=16)
    border  = expand_shorthand('3px 6px')             -> EdgeSizes(top=3, right=6, bottom=3, left=6)
    margin  = expand_shorthand('20px')                -> EdgeSizes(top=20, right=20, bottom=20, left=20)

    dims.padding_box()
    dims.border_box()

RESULT
------------------------------
    padding_box() -> Rect(x=-16, y=-4, width=224, height=116)
    border_box()  -> Rect(x=-22, y=-7, width=236, height=122)

WORKING THROUGH padding_box() EDGE BY EDGE
------------------------------
expand_rect_by(content, padding) computes:
    x      = content.x - padding.left   = 0   - 16 = -16
    y      = content.y - padding.top    = 0   - 4  = -4
    width  = content.width + padding.left + padding.right  = 200 + 16 + 8  = 224
    height = content.height + padding.top + padding.bottom = 100 + 4  + 12 = 116

Each edge grows the rect in its OWN direction: the left edge pushes x
further negative (the box extends further left), the top edge pushes
y further negative (extends further up), and width/height each grow
by the SUM of their own two opposing edges (left+right for width,
top+bottom for height) -- because growing on both sides at once adds
to the total span twice, once per side.

WORKING THROUGH border_box() EDGE BY EDGE
------------------------------
border_box() is expand_rect_by(padding_box(), border) -- the SAME
operation, run again, using the just-computed padding box as its own
new starting rect, and the border EdgeSizes(3, 6, 3, 6) as the growth:
    x      = -16 - border.left = -16 - 6 = -22
    y      = -4  - border.top  = -4  - 3 = -7
    width  = 224 + border.left + border.right  = 224 + 6 + 6 = 236
    height = 116 + border.top  + border.bottom = 116 + 3 + 3 = 122

WHY THIS WORKS AS AN ANSWER
------------------------------
Both results fall directly out of calling the exact same
expand_rect_by() function twice in a row, each time treating the
previous result as the new starting rect -- there's no separate
"border box formula," just the padding box treated as input to an
identical calculation. This is the whole point of the box model's own
design: content -> padding -> border -> margin is a chain of identical
growth operations, not four different formulas that happen to look
similar. Verifying each edge separately (rather than only checking the
final width/height numbers) confirms the x/y shift and the
width/height growth are both doing their own separate, correct job --
a bug that shifted x/y without correctly growing width/height (or vice
versa) would still be caught by checking all four fields independently.