CSS Tutorials
Tags:
Categories: ,

Overview

The CSS width, height, min-width, min-height, max-width, and max-height properties are used to set the size (including minimum/maximum) of an element.

  • width – sets the width of the element
  • height – sets the height of the element
  • min-width – sets the smallest width the element can have
  • min-height – sets the smallest height the element can have
  • max-width – sets the largest width the element can have
  • max-height – sets the largest height the element can have
This element (box) is 100% wide x 80px high

Note

The following are basic examples. Towards the bottom of this page you’ll find a complete list of all applicable properties, where you can find more information on the properties discussed, and sometimes find more involved properties not discussed on this page.

Setting the Size

This is the size that the element will appear on all screens.

div {
    width: 100%;
    height: 80px;
}

Note

Normally, you would only set one or the other (width or height) and not both (although you may set the height to auto, especially with an image element). You would let the content dictate the height of the element. For example, this green note has a set % width, but the height remains unset and will grow to accommodate the text.

img {
    width: 100%;
    height: auto;
}

Setting the Minimum and Maximum Size

This is the smallest and largest that an element is to appear on the screen. For instance, if someone is using a very large screen and you simply have the width set to 100%, the content of the element will stretch entirely across the screen, which could look awkward, and be difficult to read. So you set a max-width to something where it will grow with the screen size, but only to a certain point.

Similarly, you may want to set a minimum size for times when having the element smaller would look awkward or perhaps unreadable.

div {
    max-width: 1440px;
    min-width: 325px;
}

Note

Setting the min-width and max-width and letting the height grow as needed to accommodate the contents is often used. That is why we aren’t setting the min/max for the height in the example above.

Width and Height Properties

  • CSS – height Property
    The height property sets the height of an element, not including padding, borders, or margins.
  • CSS – max-height Property
    The max-height property defines the maximum height of an element. It can be smaller in height, but not larger than the specified size value.
  • CSS – max-width Property
    The max-width property defines the maximum width of an element. It can be smaller in width, but not larger than the specified size value.
  • CSS – min-height Property
    The min-height property defines the minimum height of an element. It can be larger in height, but not smaller than the specified size value.
  • CSS – min-width Property
    The min-width property defines the minimum width of an element. It can be larger in width, but not smaller than the specified size value.
  • CSS – width Property
    The width property sets the width of an element, not including padding, borders, or margins.

CSS Notes:

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.