CSS Height & Width

Every HTML element has a height and width. CSS allows you to control these dimensions according to your design needs.

Main Properties

• width
• height
• max-width
• min-width
• max-height
• min-height

.box{

    width:300px;

    height:200px;

}

The width property specifies the horizontal size of an element.

.box{

    width:400px;

}

Example

.container{

    width:80%;

}

The height property specifies the vertical size of an element.

.box{

    height:250px;

}

Example

.banner{

    height:60vh;

}

CSS supports various units for specifying width and height.

.box{

    width:50vw;

    height:40vh;

}

The max-width property limits the maximum width of an element, while min-width sets the minimum width.

.container{

    width:100%;

    max-width:1200px;

}

Minimum Width Example

.box{

    min-width:250px;

}

The max-height property limits the maximum height of an element, while min-height specifies the minimum height.

.box{

    min-height:150px;

    max-height:400px;

}

Example

.content{

    min-height:300px;

    max-height:600px;

    overflow:auto;

}

Responsive layouts automatically adjust element sizes on different devices.

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

Media Query Example

@media(max-width:768px){

    .box{

        width:100%;

        height:auto;

    }

}

Width and height define the content area. Padding, border, and margin increase the total space occupied by an element.

.box{

    width:300px;

    height:200px;

    padding:20px;

    border:2px solid black;

    margin:20px;

}

Example 1: Image

img{

    width:100%;

    height:auto;

}

Example 2: Banner

.banner{

    width:100%;

    height:300px;

}

Example 3: Card

.card{

    width:350px;

    min-height:250px;

}

Example 4: Profile Image

.profile{

    width:150px;

    height:150px;

    border-radius:50%;

}

The box-sizing property controls how width and height are calculated.

.box{

    width:300px;

    padding:20px;

    border:5px solid blue;

    box-sizing:border-box;

}

Choosing appropriate height and width values helps create responsive, attractive, and user-friendly web pages.

• Use percentage (%) widths for responsive layouts.
• Use max-width to prevent oversized containers.
• Avoid fixed heights for text-heavy content.
• Use height:auto; for images to maintain aspect ratio.
• Use box-sizing:border-box; for easier layout calculations.
• Use viewport units (vw and vh) carefully.
• Test layouts on desktop, tablet, and mobile devices.
• Keep element sizes consistent throughout the website.

❌ Incorrect

img{

    width:300px;

    height:300px;

}

✔ Better

img{

    width:300px;

    height:auto;

}

CSS height and width properties are supported by all modern browsers.

1. What is the purpose of the width property?
2. What is the difference between width and max-width?
3. Why is height:auto; useful for images?
4. What are viewport units (vw and vh)?
5. What is the difference between min-width and max-width?
6. Explain min-height and max-height.
7. How does box-sizing:border-box; affect width and height?
8. Why should fixed heights be avoided for large text content?
9. How can you make an image responsive using CSS?
10. Which CSS properties are commonly used to build responsive layouts?

In this lesson, you learned:

• ✔ Introduction to CSS Height & Width.
• ✔ Width Property.
• ✔ Height Property.
• ✔ Width & Height Units.
• ✔ max-width & min-width.
• ✔ max-height & min-height.
• ✔ Responsive Width & Height.
• ✔ CSS Box Model.
• ✔ Practical Examples.
• ✔ box-sizing with Width & Height.
• ✔ Best Practices and Common Mistakes.