Why doesn’t height: 0 hide my padded , even with box-sizing: border-box?

by

The exact definition of border-box is:

That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

So you can modify the height and width properties, but padding and border never change.

As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Then, if height is 0, you can’t make the padding be inside, because that implies the height will be negative.

More Related Contents:

  1. Detect the type of font that is displayed in an image [closed]
  2. Responsive css background images
  3. Any way to declare a size/partial border to a box?
  4. Add a CSS border on hover without moving the element [duplicate]
  5. How to prevent long words from breaking my div?
  6. Scrolling a flexbox with overflowing content
  7. Font Awesome 5 – why aren’t icons like bitcoin, facebook, twitter showing?
  8. CSS Page-Break Not Working in all Browsers
  9. Does css hover work on mobile devices?
  10. How can I remove the outline around hyperlinks images?
  11. My CSS is not getting injected through my content script
  12. CSS Styling Checkboxes
  13. Text on image mouseover?
  14. Pressed selector
  15. Float:right reverses order of spans
  16. Two divs, one fixed width, the other, the rest
  17. Bootstrap dropdowns menus appearing behind other elements – IE7
  18. Responsive css styles on mobile devices ONLY
  19. CSS: Top vs Margin-top
  20. How to make borders collapse (on a div)?
  21. Is there such a thing as an “all inclusive sibling” CSS selector?
  22. React native text going off my screen, refusing to wrap. What to do?
  23. Can I add color to bootstrap icons only using CSS?
  24. Change style of pseudo elements in angular2
  25. Center text in div?
  26. WebKit CSS content Unicode bug?
  27. SASS for loop updating hsla lightness returns error $lightness: “96.77419” is not a number for `hsla’
  28. How can I align 3 divs side by side?
  29. Custom CSS being overridden by Bootstrap CSS
  30. text overflow ellipsis: avoid word break

Leave a Comment