The CSS box-sizing property let include the padding and border in an element’s total width and height.
Demo:
Syntax:
box-sizing: content-box|border-box;content-box (default) – the width and height properties (and min/max properties) includes only the content (border and padding are not included).
b0rder-box – the width and height properties (and min/max properties) includes content, padding and border.
If you set box-sizing: border-box; on an element, padding and border are included in the width and height:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#ex-1 {
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid #0a9396;
}
#ex-2 {
box-sizing: border-box;
width: 300px;
height: 100px;
padding: 30px;
border: 10px solid #0a9396;
}
</style>
</head>
<body>
<h4>box-sizing: content-box (default):</h4>
<p>Width and height only apply to the content of the element:</p>
<div id="ex-1">Content</div>
<h4>box-sizing: border-box:</h4>
<p>Width and height apply to all parts of the element: content, padding and borders:</p>
<div id="ex-2">Content</div>
</body>
</html>Output:
box-sizing: content-box (default):
Width and height only apply to the content of the element:
Content
box-sizing: border-box:
Width and height apply to all parts of the element: content, padding and borders:
Content
Enjoy coding!
Read also:
CSS box-decoration-break Property