Use the IE 5 CSS box model to calculate the width and height of elements.
Syntax box-sizing: content-box | border-box ; -moz-box-sizing: content-box | border-box | padding-box ; Key content-box The width and height properties represent only the dimensions of the content. They don’t include the border, margin, or padding (Default CSS 2 box model.) border-box The width and height properties represent the sum of the content + padding size + border size, but don’t include the margin. (IE 5 box model.) padding-box The width and height properties include the content + padding size, but don’t include the border or margin. inherit Inherit the property from a parent element.
Box-sizing works in conjunction with min-width / max-width / min-height / max-height.
When border-box is applied to a <textarea> it will prevent padding and border from expanding the elements width beyond 100% .
Examples:
h1 { box-sizing: border-box; }
.emw3class {
box-sizing: content-box; }
#emw3id { box-sizing: border-box; }
Try it:
Box 1
Box 2
Box 3
|
(CSS 3) Browser Support: IE, Opera, and Chrome, use the equivalent -moz-box-sizing for Firefox and -webkit-box-sizing for Safari.
“People who know little are usually great talkers, while men who know much say little” ~ Jean Jacques Rousseau
Related:
box-sizing - MDN Web Docs.
box sizing and inheritance - CSS Tricks.
The CSS Box Model - Borders, Padding and Margins.
box-shadow - Attach one or more drop-shadows to the box.
max-height - Maximum height of an element.
min-height - Minimum height of an element.
max-width - Maximum width of an element.
min-width - Minimum width of an element.