The height and width properties are used to control the dimensions of an element, specifying how tall (height) and wide (width) it should be rendered on the webpage.
These properties are crucial for controlling the layout and sizing of HTML elements. we can declare the value of Height and Margin in may ways. Negative values are also accepted

• px (pixels)
• pt (points)
• em (ems)
• % (percentage)
• vh (viewport height) and vw (viewport width)
• rem (root em)
• ch (character width)
• xh (x-height)

These formats are applicable to many styles.

.s1 {
    height: 200px;
    width: 100px;
}
.s2 {
    height: 80%;
    width: 40%;
}
.s3 {
    height: 50vh;
    width: 50vw;
}

By default, most elements will automatically adjust their width to fit the content within them (width: auto).
Similarly, elements like block-level divs will expand vertically to fit their content (height: auto).
However, you can still use height: auto and width: auto explicitly if needed.

.auto-width {
  width: auto;
}

.auto-height {
  height: auto;
}

You can set minimum and maximum dimensions for an element using the properties.

1. min-width
2. max-width
3. min-height
4. max-height

.resizable-element {
  min-width: 100px;
  max-width: 300px;
  min-height: 50px;
  max-height: 200px;
}

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now