CSS Height/Width

Fixed Height and Width:

Sets a fixed height and width for an element.

                          
                            div {
                                height: 100px;
                                width: 200px;
                            }

Percentage Height and Width:

Sets the height and width as a percentage of the containing element's dimensions.

                          
                            section {
                                height: 50%;
                                width: 75%;
                            }

Minimum and Maximum Height/Width:

Defines minimum and maximum values for height and width.

                          
                            img {
                                min-height: 50px;
                                max-width: 300px;
                            }

Viewport Units:

Uses viewport units to set dimensions relative to the viewport size.

                          
                            header {
                                height: 30vh; /* 30% of viewport height */
                                width: 50vw; /* 50% of viewport width */
                            }

Auto Height and Width:

Allows the browser to automatically calculate the height or width based on content.

                          
                            article {
                                height: auto;
                                width: auto;
                            }

Box Sizing:

Specifies whether the padding and border of an element should be included in the total width and height.

                          
                            div {
                                box-sizing: border-box;
                                width: 200px;
                                height: 150px;
                                padding: 10px;
                                border: 2px solid #3498db;
                            }

Responsive Images:

Uses the max-width: 100% rule to make images responsive within their container.

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

These examples will help you grasp the working of the height and width properties which are widely used in controlling the HTML element size in several ways.

Pick up the method which is most appropriate for your design introduction!