width

Defines the width of an element’s content area. The content area is the space inside the padding, border, and margin of the element.

Syntax

width: <value>;

where <value> can be one of the following:

  • Length values: 330px
  • Percentage values: 50%
  • Keyword values: auto, max-content, min-content, fit-content

Note: In the case that box-sizing is set to border-box, the width of the element includes the content, padding and border. The width property will be overridden by the min-width, and max-width properties.

Example 1

Set the width of the .box element to be 40em:

.box {
background-color: blue;
width: 40em;
}

Example 2

Set the width of the .box element to be 100px including the padding and the border:

.box {
box-sizing: border-box;
padding: 20px;
border: 2px solid black;
width: 100px;
}

Example 3

Set the width of the .child-box element to be half the width of the .parent-box element:

<div class="parent-box">
<div class="child-box">I am 50% as wide as my parent.</div>
</div>
.parent-box {
border: 2px solid blue;
width: 200px;
}
.child-box {
border: 2px solid red;
width: 50%;
}
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn CSS on Codecademy

Edit this page on GitHub

Contributors