+ 
+
+
+
+ Here's a div that uses CSS box sizing property, in which the width and height properties are accounted for including content, border and padding values.
Other relevant properties to are initial that sets the property to its default value, and inherit.
#divboxsizing1 {
+ background-color: #5b7efa;
+ border-radius: 7px;
+ padding: 3em;
+ min-height: 100px;
+ margin: 0 3em;
+ box-sizing: border-box;
+}The same thing - only without box-sizing.
+Notice how the same padding value (3em) balooned up the height of the div, as opposed to the previous example, where it got absorbed.
+ +#divnoboxsizing {
+ background-color: #5b7efa;
+ border-radius: 7px;
+ padding: 3em;
+ min-height: 100px;
+ margin: 0 3em;
+}