Loading lesson path
width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element ( the box model ). So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
Formula
Here, the < div > element is given a width of 300px.
However, the actual width of the < div > element will be 350px (300px +
25px of left padding + 25px of right padding):div {
width: 300px;
padding: 25px;
}The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.
Formula
The box - sizing property can have the following values:
content - boxFormula
border - boxFormula
Use the box - sizing property to keep the width at 300px, no matter the amount of padding:div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}Formula
A shorthand property for setting all the padding properties in one declaration padding - bottom
Sets the bottom padding of an element padding - left
Sets the left padding of an element padding - right
Sets the right padding of an element padding - top