The height property in CSS sets the height of an element. It can be used to set the height of any element, including block-level and inline elements. By default, the height of an element is determined by its content, but setting the height property overrides this behavior and sets the height to a specified value.
Setting the height of a div element to a fixed value:
<div style="height: 100px;"></div>
Setting the height of an image element to a percentage of its parent container:
<div style="height: 200px;"> <img src="image.jpg" style="height: 50%;"> </div>
Setting the height of a table row to a fixed value:
<table> <tr style="height: 50px;"> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
|The height is determined by the element's content. This is the default value.|
|Sets the height to a fixed length value, such as 100px.|
|Sets the height to a percentage of the height of the element's containing block.|
- Avoid setting fixed heights for elements that contain dynamic content. Instead, use min-height to ensure the element is always tall enough to accommodate its content.
- Use percentage heights sparingly, as they can be difficult to manage in complex layouts. Instead, consider using vh units to set a percentage of the viewport height.
- When using percentage heights, make sure the element's containing block has a defined height. Otherwise, the percentage height will be calculated based on the height of the parent element's content.
- Use the calc() function to calculate the height based on other values. For example, you can use calc(100% - 50px) to set the height to 100% of the containing block minus 50 pixels.
- Avoid setting heights on inline elements, as this can cause layout issues.
|Chrome||Firefox||Safari||Internet Explorer||Microsoft Edge||Opera|