Does element width include padding?

by

  • IE used to use the more-convenient-but-non-standard “border-box” box model. In this model, the width of an element includes the padding and borders. For example:
    #foo { width: 10em; padding: 2em; border: 1em; }
    would be 10em wide.

  • In contrast, all standards-fearing browsers default to the “content-box” box model. In this model, the width of an element does not include padding or borders. For example:
    #foo { width: 10em; padding: 2em; border: 1em; }
    will actually be 16em wide: 10em + 2em padding for each side, + 1em border for each edge.

If you use a modern version of IE with valid markup, a good doctype, and appropriate headers it will adhere to the standard. Otherwise, you can force modern standards-compliant browsers to use “border-box” via:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

The first declaration is needed for Opera, the second is for Firefox, the third is for Webkit and Chrome.

Here’s a simple test I made years ago for testing what box-sizing declaration your browser supports: http://phrogz.net/CSS/boxsizing.html

Note that Webkit (Safari and Chrome) do not support the padding-box box model via any declaration.

More Related Contents:

  1. How to make attractive button using CSS
  2. How to create one vertical column in between rows in Flexbox [closed]
  3. How can i make this wave effect on both bottom and top
  4. How to apply a CSS filter to a background image
  5. Why is a flex item limited to parent size?
  6. Transparent text cut out of background
  7. Remove blue border from css custom-styled button in Chrome
  8. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  9. React.js inline style best practices [closed]
  10. Internet Explorer’s CSS rules limits
  11. CSS: Set a background color which is 50% of the width of the window
  12. CSS background opacity with rgba not working in IE 8
  13. Can I position an element fixed relative to parent? [duplicate]
  14. Eliminate flash of unstyled content
  15. Right to Left support for Twitter Bootstrap 3
  16. How do nested vertical margin collapses work?
  17. What does the dot mean in CSS?
  18. Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)
  19. Can we use any other TAG inside along with ? [duplicate]
  20. -webkit-margin adds unwanted margin on texts
  21. How can I prevent CSS gradient banding?
  22. Why adding version number to CSS file path?
  23. Can I define a class name on paragraph using Markdown?
  24. Check scrolling with CSS
  25. up/down arrow key issue with typeahead control (angular bootstrap UI)
  26. Why box-sizing is not working with width/height attribute on canvas element?
  27. Center fixed div with dynamic width (CSS)
  28. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  29. CSS: Left, Center, & Right Align Text on Same Line
  30. Row Wrap in flex-box not wrapping in Safari

Leave a Comment