HTML, CSS, JavaScript Tutorial

CSS Property: box-sizing

The CSS (CSS3) box-sizing property indicates what the sizing properties of a box (width and height) should be applied to, i.e. just the content-box or some broader definition.

Valid property values (other than inherit and initial) are:

Value	Description
border-box	Height and width properties (and min-height / min-width / max-height / max-width properties) include content, border and padding (but not margin)
content-box	(default value). Height and width properties (and min-height / min-width / max-height / max-width properties) include only the content, and do not include border, padding or margin

Default Value:	content-box
JavaScript syntax:	e.g. object.style.boxSizing="border-box"
Inherited:	No
Animatable:	No

EXAMPLE:

HTML USED IN THIS EXAMPLE:

<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {border: 2px solid green; padding: 20px}
p.x1 {width: 200px;}
p.x2 {width: 200px; box-sizing: border-box}
</style>
</head>
<body>
1. Element with default property
<p class="x1">1</p><br>
2. Element set using in-file HTML style
<p class="x2">2</p><br>
3. Element set using JavaScript
<p id="x3">3</p>

<script>
document.getElementById("x3").style.width = "200px";
document.getElementById("x3").style.boxSizing = "border-box";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:

function isSupportedCSSPropertyBoxSizing() {
  var x = document.createElement("DIV"); x.style.boxSizing = "border-box"; return (window.getComputedStyle(x, null).boxSizing == "border-box");
}

NAVIGATION LINKS
Contents | Prev | Next | CSS Properties

Desktop view | Switch to Mobile