CSS width

The width property specifies the width of an element. By default, it specifies the width of an element's content area. So, addition of padding, border or margin will increase the total visible width.

CSS

width: value;

Before proceeding, you must have a brief idea about the CSS Box Model.

CSS Box Model

The box model of an element contains four boxes - content box, padding box, border box and margin box.

The content box contains all the content like text, images, tables of the element. Padding is the area around the content of the element that separates it from the border. The border area surrounds the padding area and contains the borders. Lastly, the margin area is an empty area that surrounds the border area. It is used to separate the element from other elements which are its neighbours.

So what comprises of the width and the height of the element?

The properties width and height determine the width and height of the content area. On giving padding and borders, the visible or rendered width and height increase. This is shown by the following equations.

width + padding + border = actual visible width

height + padding + border = actual visible height

Using box-sizing property

This property controls whether the width and height values include padding or border. It can take the following three values

content-box : The width property specifies the width of only the content box. This is also the default value.

padding-box : The width property specifies the width of the padding box, which includes content and padding.

border-box : The width property specifies the width of the border box, which includes content, padding and border.

Values

auto : The browser calculates the width depending on other properties. This is the default value.

<length> : Specifies the width in px, pt, em, rem, etc.

<percentage> : Specifies the width as a percentage of the width of the containing block.

initial : Sets the default value.

inherit : Inherits value from parent element.

Examples

Look at the following demo in which the width of a paragraph is set as 200px. Since no height value is specified, so the browser set its height such that all the content of the paragraph gets included in it.

HTML

<p>Lorem ipsum ... auctor pulvinar.</p>

CSS

p {
  border: solid 2px;
  width: 200px;
}

See the Pen CSS width property example by Aakhya Singh (@aakhya) on CodePen.

The second demo shows three cases. Each of the three paragraphs is given a width of 250px and a 2px border, and each contains an image.

In the first paragraph, the image is given width as 200 and height as 124 using the width and the height attribute respectively in HTML.

In the second paragraph, the image is not given any HTML attribute and its width is set as 50% using the width property. This made the width of the image 50% of its parent element p, and its height got resized accordingly to maintain the aspect ratio (ratio of width to height) because the default value of height is auto.

In the third paragraph also, the dimensions of the image is set using the widthand height attributes. The image is also given width: 50%. The width assigned to the image using the width property overrode the width assigned to it using the width attribute, thus making the width of the image 50% of its parent element. Since no height property is defined, the image takes the height defined by the height attribute.

HTML

<p><img src="logo.jpg" width="200" height="124"></p>

<p><img id="img2" src="logo.jpg"></p>

<p><img id="img3" src="logo.jpg" width="200" height="124"></p>

CSS

p {
  border: solid 2px;
  width: 250px;
}

#img2 {
  width: 50%;
}

#img3 {
  width: 50%;
}

See the Pen Giving width in percentage to images by Aakhya Singh (@aakhya) on CodePen.

Note that the width of an element expressed in percentage will change on changing the screen or the container width. The height of the image in the third case in the above demo can be made to resize according to its width by setting the height property to auto for the image.

HTML

<p><img src="logo.jpg" width="200" height="124"></p>

CSS

p {
  border: solid 2px;
  width: 250px;
}

img{
  width: 50%;
  height: auto;
}

See the Pen width and height example by Aakhya Singh (@aakhya) on CodePen.

In this case, there is no effect of width and height attributes on the image dimensions.

Browser Support

This property is supported in all modern browsers.