CSS height PropertyS2C Home « CSS height Property

Definition

The CSS height property allows us to specify the content height for a box model element.

Applies To

All elements except non-replaced inline elements, table columns and column groups.

Property Values

negative values are NOT acceptable when using the CSS height property..

auto - The element height property value will be determined, dependant upon the properties of other values. Look at the W3C CSS Specification for a full list of elements and how the height is determined.

inherit - The element will inherit the height property of its parent element.

length - Defines a length value in a unit measurement such as em or pixel.

n% - A percentage value relative to the parent element where n is a number.

Default Value

Default value is set to auto which allows the browser to assign the height property value.

Inheritance

The height property is NOT inherited from the parent element unless specified using the inherit property value.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html> 
<!-- Our HTML/CSS for the CSS height property follows -->
<html  lang="en">
<head>
<title>CSS Reference - CSS height Property</title>

<!-- Valid values for CSS height Property are:
	
	auto, inherit, length and percentage value.
	
--> 

<style type="text/css">

#img1 {
  height: 150px;
}

#img2 {
  height: 300px;
}

</style>

</head>
<body>
<h1>CSS height Property</h1>
<h2>Image with height of 150 pixels</h2>
<p>
<img id="img1" src="https://server2client.com/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie">Look at the image height.</p>
<h2>Same image with height of 300 pixels</h2>
<p>
<img id="img2" src="https://server2client.com/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie">Look at the image height.</p>
</body>
</html>

How It Looks

The results of using the height property with the values above will look something like the following:

height

go to home page Homepage go to top of page Top