overflow: hidden clips content at the element’s padding edge. Bottom padding is inside that clipping boundary, not extra space beyond it, so it cannot reserve a visible buffer after overflowing content. If you need breathing room below clipped content, put the padding on an outer wrapper and clip an inner element.
Why bottom padding does not stop the clipping
CSS overflow is clipped at the padding box (also called the padding edge), as specified by the W3C CSS 2.2 specification. MDN likewise describes hidden content as clipped at the element’s padding box in its overflow reference.
As an Amazon Associate I earn from qualifying purchases.
Padding is part of that box. It does not extend the clipping boundary past the element’s bottom edge. When content exceeds a constrained height, it can therefore look as if the element has ignored its bottom padding: the content is simply being clipped at the box boundary.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Find the size constraint causing the overflow
Vertical overflow usually becomes visible when an element has a constrained height, max-height, block-size, or max-block-size. Check the element’s computed styles and inspect its box model in browser developer tools. Also check whether a parent, rather than the element itself, is doing the clipping.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
box-sizing: border-box makes a declared height or width include padding and border. That can make a fixed-size layout easier to reason about, but it does not move the overflow clipping edge.
Keep visible space below clipped content
Put padding on an outer wrapper
Let the outer element provide the visible breathing room, and apply the height limit and clipping to an inner element:
.card {
padding-bottom: 1rem;
}
.card__content {
max-height: 12rem;
overflow: hidden;
}Here, the card’s padding sits outside the child’s clipping boundary, so it remains visible below the clipped content.
Change the constrained size or content
If the padding must belong to the same box that clips the content, increase that box’s available height or revise the content and sizing rules. Padding cannot extend the clipping region beyond the padding box.
Quick Recap
Best Value
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Choose between hidden, clip, and auto
hiddenclips overflow without displaying scrollbars, but the element remains a scroll container. Clipped content may still be brought into view through focus navigation or script.clipclips overflow without creating a scroll container and disallows programmatic scrolling. Avoid it when users need to reach hidden interactive content.autoprovides scrollbars when content overflows, allowing users to access that content.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
