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: