CSS - Width property (of a box)
Table of Contents
1 - About
The width property specifies the width of boxes and it's calculation is defined by the box sizing property.
2 - Articles Related
3 - Width HTML vs CSS attribute
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>
4 - 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:
- 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>
5 - Usage
Values <length> | <percentage> | auto | inherit
Initial value auto
Applies to All elements but non-replaced inline elements, table rows, and row groups
Inherited No
where:
6 - Example
6.1 - Box Sizing
6.2 - 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>