Box-sizing

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.


Copyright © 2013-2022 Emw3.com
Some rights reserved