Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS width Property

  • Last Updated : 03 Nov, 2021

The width property in CSS is used to set the width to the text, images. The width can be assign to the text and images in the form of pixels(px), percentage(%), centimetre(cm) etc. The width property does not contain padding, borders, or margins. The width property is overridden by the min-width & max-width properties. The width property, by default, sets the width for the content area, although if the value of the box-sizing is set to border-box then it will set the width of the border area.

Syntax:

width: auto | value | initial | inherit;

Note: The width property for the element does not involve the padding, border & margin.

Default Value : Its default value is auto. 

Property Values: All the properties are described well with the example below.



auto: It is used to set the width property to its default value. If the width property is set to auto then the browser calculates the width of the element.

Syntax:

width: auto;

Example: This example demonstrates the use of the width property whose value is set to auto.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS width Property </title>
    <style>
    .gfg {
        width: auto;
        color: white;
        font-size: 20px;
        background-color: rgb(0, 150, 0);
    }
     
    h2 {
        font-size: 20px;
        color: black;
    }
    </style>
</head>
 
<body>
    <h2>
      CSS width Property
    </h2>
    <p class="gfg">
      This is an example of auto width property
    </p>
 
 
</body>
</html>

Output:

value: It is used to set the width in the form of pixels(px), Percentage(%), centimetre(cm) etc. The width can not be negative.

Syntax:

width: value;

Example: This example demonstrates the use of the width property whose value can be defined in pixels(px), Percentage(%), centimetre(cm) etc.



HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS Width Property </title>
    <style>
    .gfg {
        width: 150px;
        color: white;
        font-size: 20px;
        background-color: RGB(0, 150, 0);
    }
     
    .gfg1 {
        width: 50%;
        color: white;
        font-size: 20px;
        background-color: RGB(0, 200, 0);
    }
     
    h2 {
        color: black;
    }
    </style>
</head>
 
<body>
    <h2>
        CSS width Property
    </h2>
    <p class="gfg">
         An example of width property in form of pixels.
    </p>
 
 
    <p class="gfg1">
        An example of width property in form of percentage.
    </p>
 
 
</body>
</html>

Output:

initial: It is used to set an element’s CSS property to its default value.

Syntax:

width: initial;

Example: This example demonstrates the use of the width property whose value is set to the initial.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS Width Property </title>
    <style>
    .gfg {
        width: initial;
        color: white;
        font-size: 20px;
        background-color: RGB(0, 150, 0);
    }
     
    h2 {
        color: black;
    }
    </style>
</head>
 
<body>
    <h2>
        CSS width Property
    </h2>
    <p class="gfg">
        An example of width property for its initial width value.
    </p>
 
 
</body>
</html>

Output:

inherit: It is used to inherit a property to an element from its parent element property value.

Supported Browsers:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!