CSS Width, Height

Keywords

css, width, height, css width, css height, dataidea, data science, web development, website

Photo by DATAIDEA

Width and Height

The width and height CSS properties set the width/heght of an element.

By default, these properties define the width/height of the content area/box

Valid values:

  • <length>
  • <percentage>
  • auto: calculates and selects a width/height for the element
  • max-content: the intrinsic prefered width
  • min-content: the intrinsic minimum height
  • available: containing block width minus horizontal margin, border and padding
  • fit-content: the larger of: the intrinsic minimum width; the smaller of the intrinsic preferred width and the available width

Note!

The width and height attributes only set the area inside the padding, border and margin of the element anddoes not include them.

Example:

Here is an example of the width CSS property

#div1 {
    width: 200px;
}

#div2 {
    width: 5em;
}

#div3 {
    width: 75%;
}

#div4 {
    width: auto;
}

div {
    height: 200px;
    border: 2px solid red;
    margin: 5px;
}

Result:

Example:

Here is an example of the height CSS property

#div1 {
    height: 200px;
}

#div2 {
    height: 5em;
}

#div3 {
    height: 75%;
}

#div4 {
    height: auto;
}

div {
    height: 200px;
    border: 2px solid red;
    margin: 5px;
}

Result:

Minimum and Maximum Widths and Heights

The following properties define CSS minimum and maximum widths and heights

  • min-width: sets the minimum width of an element.
  • max-width: sets the maximum width of an element.
  • min-height: sets the minimum height of an element.
  • max-height: sets the maximum height of an element

Valid values:

  • <length>
  • <percentage>

Examples

Here’s an example of the min-width CSS property.

p {
    min-width: 500px;
    background: lightblue;
}

Result:

Here’s an example of the min-width CSS property.

Here’s an example of the max-width CSS property.

p {
    max-width: 250px;
    background: lightgreen;
}

Result:

Here’s an example of the max-width CSS property.

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Back to top