Categories
CSS Web development

CSS width Property

Learn how to use the CSS width Property.


CSS width Property

The CSS width property settles the width of an element.

The CSS min-width and max-width properties override the width property.

Demo:

Click the “Try it” button to change the width of the DIV element:



CSS width Property


Note: the width of an element does not include margins, padding and borders.

Syntax:

width: auto|value;

auto (default) – the width is calculated by the browser.

value – specifies the width in px, %, etc (read also Units in CSS).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
  width: auto;
  border: 1px solid #333;
}

.example2 {
  width: 100px;
  border: 1px solid #333;  
}

.example3 {
  width: 50%;
  border: 1px solid #333;  
}
</style>
</head>
<body>

<h4>width: auto;</h4>
<div class="example1">This is a paragraph.</div>

<h4>width: 100px;</h4>
<div class="example2">This is a paragraph.</div>

<h4>width: 50%;</h4>
<div class="example3">This is a paragraph.</div>

</body>
</html>

Output:

width: auto;

This is a paragraph.

width: 100px;

This is a paragraph.

width: 50%;

This is a paragraph.

Enjoy coding!

Read also:

CSS columns Property

CSS filter Property

CSS @keyframes Rule