height

Definition

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.

Examples

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>

Values

Best Practices

• 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.

Browser Compatibility