CSS - Width property (of a box)

Boxdim

About

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

Width HTML vs CSS attribute

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,

  • 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>
<p width="80px" style="border:1px solid aqua;">
This paragraph will not follow the width HTML attribute
</p>

Formula

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:

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

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

Usage

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:

Example

Box Sizing

See CSS - Box sizing (property and definition)

Inline vs Block Box

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

The p element renders by default as a block box whereas the span element renders default as a inline box

DOM Get

<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

Documentation / Reference





Discover More
CSS - Block And Inline Layout (Block Formatting context)

CSS - Block And Inline Layout (Block Formatting context) CSS Block and inline layout is the first layout model of CSS. It's also known as: * block formatting * flow layout The component are laid...
Boxdim
CSS - Box Size

CSS Sizing of a box The width and the height of a box are dependent of the: layout and of the box sizing parameters The sizes are calculated with respect to the edges of a rectangular box called...
Firebug Box Sizing
CSS - Box sizing (property and definition)

The box-sizing property is used to alter the default box model used to calculate widths and heights of elements. The width and height are defined as the width and height: of the or of the depending...
CSS - Canvas

For all media, the term canvas describes “the space where the formatting structure is rendered.” The canvas is infinite for each dimension of the space, but rendering generally occurs within a finite...
CSS - Inline Box

CSS Inline is a layout used to layout inline xml element (ie text formatting context) It's used in differents formatting context: the block level as an the flex level as also its ... An inline-level...
CSS - Inline box Size

Inline objects don't have heights or widths. If you want use them, you probably want to float or inline-block them. inline block doesn't take the width of a box into account. Inline objects don't...
Boxdim
CSS - Length Value (Size)

CSS Lengths refer to horizontal or vertical measurements. The format of a length value is a number (with or without a decimal point) immediately followed by a unit identifier where: number is...
CSS - Percentage Value

The format of a percentage value is a number followed by the character %. Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines...
CSS - Responsive (Breakpoint)

responsiveness in CSS An element that defined the width: as percentage or fix with a max-width property in percentage generally equal or below 100% Example: Bootstrap use media queries to create...
CSS - Transitions

in CSS. Transition properties create smooth transitions (using timing functions) between different values property of two different element state. The transition short property is where: transition-durationtransition-duration:...



Share this page:
Follow us:
Task Runner