CSS height and width


Streaming now live

HTML, CSS - free educational webinar for your quarantaine.

WATCH NOW

Free live lesson

Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.

JOIN NOW

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.


                      .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


                .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

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