CSS height and width

Author: Michal Szymanski

-

---

CSS Height and Width

The height and width properties are used to set the height and width of an element.

The height and width can be set to auto (This is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

• CSS
• HTML

                      .example-1 {
                        width: 100%;
                        height: 200px;
                        background-color: powderblue;
                      }
                  

                      <div class="example-1">
                          This element has a height of 200 pixels and a width of 100% of available space
                        </div>
                  

This element has a height of 200 pixels and a width of 100% of available space

---

• CSS
• HTML

                .example-2 {
                    height: 100px;
                    width: 500px;
                    background-color: powderblue;
                }
        

            <div class="example-2">
                    This element has a height of 100 pixels and a width of 500 pixels of available space
                </div>
        

This element has a height of 100 pixels and a width of 500 pixels of available space

---

Previous lesson Next lesson

---

Spread the word:

---

Do you need help? Use our support forum

---

About the author

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.