CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



CSS Height/Width

CSS Height/Width is used to set the height and width of an HTML element. It is an important aspect of web design as it helps in creating a visually appealing website. In this tutorial, we will discuss CSS Height/Width in detail.

Height Property

The height property is used to set the height of an HTML element. It can be set in pixels, ems, or percentages. The default value of the height property is auto, which means that the height of the element will be determined by its content.

Let's take a look at some examples:

<div style="height: 100px;"></div>
<div style="height: 50%;"></div>
<div style="height: 2em;"></div>

The first example sets the height of the div element to 100 pixels. The second example sets the height of the div element to 50% of its parent element. The third example sets the height of the div element to 2 ems.

Width Property

The width property is used to set the width of an HTML element. It can be set in pixels, ems, or percentages. The default value of the width property is auto, which means that the width of the element will be determined by its content.

Let's take a look at some examples:

<div style="width: 100px;"></div>
<div style="width: 50%;"></div>
<div style="width: 2em;"></div>

The first example sets the width of the div element to 100 pixels. The second example sets the width of the div element to 50% of its parent element. The third example sets the width of the div element to 2 ems.

Height and Width Together

The height and width properties can be used together to set the size of an HTML element. Let's take a look at an example:

<div style="height: 100px; width: 200px;"></div>

This example sets the height of the div element to 100 pixels and the width to 200 pixels.

Conclusion

CSS Height/Width is an important aspect of web design. It helps in creating a visually appealing website by setting the size of HTML elements. By using the height and width properties, web designers can create a website that is both functional and aesthetically pleasing.

References

Activity