CSS

The width property sets the width of an element.

CSS width property

The width property is used to set the width of an element.

The width property does not include padding, border, or margin, which means it determines the width of the element inside the padding, border, and margin.

The width attribute can have one of the following values.

  • auto This is the default value and the browser automatically calculates the width of the element.
  • length Calculates the width in px, cm etc.
  • % Calculates the width as a percentage of the parent element.
  • initial Resets the width to its default value.
  • inherit The width will inherit from its parent element width.

Example

.p1 {
  width: 600px;
  border: 1px solid black;
  background-color: #96bcec;
}
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

.p1 {
  width: 600px;
  border: 1px solid black;
  background-color: #959595;
}
.p2 {
  width: 50%;
  border: 1px solid black;
  background-color: #96bcec;
}
Try it Now »

Click on the "Try it Now" button to see how it works.


Example

.p1 {
  width: 600px;
  border: 1px solid black;
  background-color: #959595;
}
.p2 {
  margin:auto;
  width: 50%;
  border: 1px solid black;
  background-color: #96bcec;
}
Try it Now »

Click on the "Try it Now" button to see how it works.