CSS - Width property (of a box)

The width property specifies the width of boxes and it's calculation is defined by the box sizing property.

If you want to set a width on a p element for instance,

• you need to use the css width attribute

<p style="width:80px;border:1px solid aqua;">
This paragraph will be constraint by the CSS width.
</p>

• as the HTML width attribute will not work

<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:

• The box sizing property defines the calculation.
• The min-width and max-width properties override width.
• The white space property may prevents a line box to (wrap|break)
• The type of block: An inline block will not take the width into account.

Formula taking into account only the box sizing property:

• In a CSS - Box sizing (property and definition) model

<MATH> \text{Width Size} = \text{Content Size} </MATH>

• In a CSS - Box sizing (property and definition) model

<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:

• auto: (Default) The browser will calculate and select a width for the specified element.
• CSS - Length Value (Size): Defines the width as an absolute value.
• CSS - Percentage Value: Defines the width as a percentage of the containing block's width.

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;
}

• The type of block is important. It must be block box

<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>

<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:

• clientWidth includes:
  • the width
  • and horizontal padding.
• offsetWidth includes:
  • the width,
  • horizontal padding,
  • and vertical borders.
• scrollWidth == clientWidth

• width
• width