CSS dimension properties

With CSS dimension properties, you can set the height and width of elements as well as the space between lines.

This lesson focuses on:

Setting the height of elements
Setting the width of elements
Setting the space between lines

Setting the height of elements

The height of elements is set using the height property.

Example:

<html>
<head>
<title>Setting the height of elements</title>
</head>
<body>
<img src="apple.jpg" alt="Apple" border="0" />
<img src="sky.jpg" alt="Sky" 
border="0" style="height: 200px;" />
</body>
</html>

Output:

In the above example, there are two images. The first image has its default height. The second image is set to have a height of 200 pixels.

Setting the width of elements

The width of elements is set using the width property.

Example:

<html>
<head>
<title>Setting the width of elements</title>
</head>
<body>
<table border="2">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

<br /><br />

<table border="2" style="width: 200px;">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>

Output:

Cell 1	Cell 2
Cell 3	Cell 4

Cell 1	Cell 2
Cell 3	Cell 4

In the above example, there are two tables. The first table has its default width. The second table is set to have a width of 200 pixels.

Setting the space between lines

The space between lines is set using the line-height property.

Example:

<html>
<head>
<style type="text/css">
<!--
p.one {line-height: 10pt;}
p.two {line-height: 20pt;}
-->
</style>
<title>Setting the space between lines</title>
</head>
<body>
<p>
This is a paragraph with regular line spacing. This is 
the second sentence of the paragraph. This is the third 
sentence of the paragraph. This is the fourth sentence of 
the paragraph.
</p>

<p class="one">
This is a paragraph with small line spacing. This is 
the second sentence of the paragraph. This is the third 
sentence of the paragraph. This is the fourth sentence of 
the paragraph.
</p>

<p class="two">
This is a paragraph with big line spacing. This is 
the second sentence of the paragraph. This is the third 
sentence of the paragraph. This is the fourth sentence of 
the paragraph.
</p>
</body>
</html>

Output:

This is a paragraph with regular line spacing. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph.

This is a paragraph with small line spacing. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph.

This is a paragraph with big line spacing. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph.

In the above example, there are three paragraphs. The first paragraph has regular line spacing. The second paragraph is set have a line spacing of 10 points. The third paragraph is set to have a line spacing of 20 points.