CSS Dimension Properties

To set various dimensions of the objects in and around HTML elements,the CSS dimension properties is used. These can be width ,height and defining the space.

Various dimension properties are:

1.height, 2.line-height 3.max-height 4.min-height 5. width 6. min-width and 7.max-width.

Height

The height of an element specified by the height property .

For rendering images,this property is useful.
Possible values are:

auto,length and percentage

auto

length

By default, value for height is auto.
Negative lengths are not allowed.

CSS Code

img {height : 200px ;}

Line-Height

The distance between two adjacent lines can be set using this property . The baselines of the adjacent lines is the distance .

This property can have the values: normal, number, length or %.

   normal - This sets the line height to the default or inherited value based on the font size of the element.

   number - This sets the line height of the current font-size to be multiplied by the number specified.

    length - This sets a fixed distance between the lines. The units used are: em, px, cm, pt.

   % - This sets the line height in % of the element's font size.

CSS Code

p { line-height : 75 px;}

Max-Height

The maximum height for an element can be specified by this property.

Possible values for max-height property are: none, length, percentage.

none - specifies that there are no height limits imposed on the element. length - specifies the maximum height for an element. % - specifies the maximum height of the element as a % of the height of the containing block.

p { max-height:100px;}

Min-Height

The minimum height for an element specified by this property .

Possible values for min-height are : length, percentage.

length - specifies the minimum height for an element. % - specifies the minimum height of the element as a % of the height of the containing block.

p { min-height: 50px;}

TThe following example increase the space between lines

CSS Code

<html>
<head>
<style type="text/css">
p.small {line-height: 0.4cm}
p.big {line-height: 0.9cm}
</style>
</head>

<body>
<p>
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
This is a paragraph with a standard line-height.
</p>

<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>

<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>

</body>
</html>

The follwing table describe the list Properties:

Property	Description	values
height	Sets the height of an element	auto length %
line-height	Sets the distance between lines	auto length %
max-height	Sets the maximum height of an element	auto length %
max-width	Sets the maximum width of an element	length %
min-height	Sets the minimum height of an element	auto length %
min-width	Sets the minimum width of an element	auto length %
width	Sets the width of an element	auto length %