CSS - Width property (of a box)

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin > CSS - Boxes (Box Model)

1 - About

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

The following property have an effect on the width:

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

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

4 - Example

4.1 - Box Sizing

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

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

Advertising

5 - Documentation / Reference

web/css/box/width.txt · Last modified: 2019/02/09 11:40 by gerardnico