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

width: value;

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;


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;


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.

Email Us: advertise@gdatamart.com

Donate Us: Support to GDATAMART

© 2023 GDATAMART.COM (All Rights Reserved)