| without padding | with 20px vertical padding | colored padding | |
|---|---|---|---|
| overflow: visible |
|
|
|
| overflow: auto |
|
|
|
In the above test cases a box with gray border, light gray background and fixed height (200px) contains a yellow child with its same height, and a green overflowing child (height: 300px).
When the parent box has vertical padding and overflow:auto (or scroll), browsers differ in the provided extent of vertical scrolling.
Some (Gecko 1.9, Safari 3+, IE8) provide just enough scrolling to see the overflowing content, but no more. The overflowing content does not appear to have any 'space' at its bottom side.
Others (Gecko 1.8, Opera 9+, IE7-) allow to scroll 'more', showing some space at the bottom the overflowing content. I believe this extra space cannot be considered the bottom padding of the parent, anyway it is something that browsers may provide (the scrolling mechanism is not precisely defined in the CSS specification), and may reasonably set equal to that bottom padding.)
The bottom padding of the parent remains immediately at the bottom of the non-overflowing content (the yellow child), there is no reason for it being copied or moved at the bottom of the overflowing content. It moves with the scrolling, but always stays at the end of the non-overflowing content.
In the third column's test cases the gray box has position:relative and there are two red absolutely positioned elements, having respectively top:0 and bottom:0. They should reveal the position of the padding (top and bottom should be measured from the padding edge of the containing box.) All browsers position them accordingly to the above interpretation.
The following test case forces the extra 'scrolling' space at the bottom of the overflowing content in all browsers. It uses an absolutely positioned element protruding from the overflowing one, of the same height as the bottom padding of the gray box (the desired extra space).
This same problem but with overflow in the horizontal direction: scrolling (overflow) and padding.
Similar tests but with margin on the child, in place of padding on the parent: scrolling and children bottom margin.