The width property specifies the width of boxes and it's calculation is defined by the box sizing property.
Don't be confuse ! This is not the same attribute than the HTML width attribute that is only limited to an handful of HTML element that already have an intrinsic width such as img, iframe, …
If you want to set a width on a p element for instance,
<p style="width:80px;border:1px solid aqua;">
This paragraph will be constraint by the CSS width.
</p>
<p width="80px" style="border:1px solid aqua;">
This paragraph will not follow the width HTML attribute
</p>
The following property have an effect on the width calculation:
Formula taking into account only the box sizing property:
<MATH> \text{Width Size} = \text{Content Size} </MATH>
<MATH> \text{Width Size} = \text{Content Size} + \text{Padding Size} + \text{Border Size} </MATH>
Values <length> | <percentage> | auto | inherit | min-content | max-content
Initial value auto
Applies to All elements but non-replaced inline elements, table rows, and row groups
Inherited No
where:
See CSS - Box sizing (property and definition)
.coloredBox {
width: 20px;
height: 20px;
border-left: 4px solid aqua;
border-right: 4px solid red;
border-bottom: 4px solid black;
border-top: 4px solid blue;
display:block;
}
<p>A block box</p>
<span class="coloredBox"></span>
<p>A inline box will not respond to the width</p>
<span class="coloredBox" style="display:inline"></span>
The p element renders by default as a block box whereas the span element renders default as a inline box
<div id="box">
Box
</div>
#box {
height:25px;
width:50px;
padding:4px;
border: 2px solid #FFF;
background-color:#D5D8CB;
}
let element = document.getElementById("box") ;
console.log("Box-Sizing defines the width as been the width of the "+window.getComputedStyle(element).boxSizing);
console.log("Client Width: "+element.clientWidth+" (50+2x4)");
console.log("Offset Width: "+element.offsetWidth+" (50+2x4+2x2)");
console.log("Scroll Width: "+element.scrollWidth+" (client width)");
where: