CSS Width
CSS width property is used to set width of the content area of an element.
- The width of an element does not include padding, borders, margins.
- It sets the width of the area inside the padding, border, and margin of the element.
- The min-width and max-width properties override width.
Width Syntax
CSS Width: Parameters
- length: Defines the width value in pixels, em, cm, etc.
- percentage: Defines the width value in percentage.
- auto: The browser will calculate the width for the element, by default.
- inherit: Element will inherit the width from its parent element.
Example of width:50%
.div_1 {
background-color: green;
width: 50%;
padding: 10px;
}
Output
Width: 50%
Hello! This is a paragraph inside the div; The width of div is 50%, and padding of this div is 10px with green background-color property.
Example with Height & Width
.div_1 {
background-color: 1d6792;
width: 50%;
height: 150px;
color: #fff;
padding: 10px;
}
Output
The width: 50% | height: 200px
Hello! This is a paragraph inside a div; The width of div is 50% & height 200px, padding 10px, and color value is #fff with background-color:#1d6792.