Dimensions

The dimensions of an element can be set using the following properties:

 

Property Description Value
width Specifies the width of an element length 

%

auto

inherit

min-width Specifies the minimum width of an element length 

%

auto

inherit

max-width Specifies the maximum width of an element length 

%

auto

inherit

height Specifies the height of an element length 

%

auto

inherit

min-height Specifies the minimum height of an element length 

%

auto

inherit

max-height Specifies the maximum height of an element length 

%

auto

inherit

 

Where length and % are the values specified as per the units section above.

 

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
	</head>
	<body>
		<h1 style="height:100px; border:solid 1px red;">A heading element with a height of 100px.</h1>
		<h1 style="min-height:200px; border:solid 1px green;">A heading element with a min-height of 200px.</h1>
		<h1 style="max-height:20px; border:solid 1px blue;">A heading element with a max-height of 20px.</h1>
		<h1 style="width:500px; border:dashed 2px red;">A heading element with a width of 500px.</h1>
		<h1 style="min-width:700px; border:dashed 2px green;">A heading element with a min-width of 700px.</h1>
		<h1 style="max-width:100px; border:dashed 2px blue;">A heading element with a max-width of 100px.</h1>
	</body>
</html>

Save & refresh browser:

A heading element with a height of 100px.

A heading element with a min-height of 200px.

A heading element with a max-height of 10px.

A heading element with a width of 500px.

A heading element with a min-width of 700px.

A heading element with a max-width of 100px.

Leave a Reply