Learn how to build and design websites with our tutorials.

CSS Width And Height Tutorial

View Tutorial Contents


CSS width and height properties allow you to set the width and height of HTML elements.

NOTE: The width and height properties do not include margins, padding or border. The width and height properties set the dimensions in the padding area, the content area.

width and height Properties and Values

The CSS width and height properties and the values that each accepts are listed below.

Property Description Values
width Sets the width of an HTML element auto, length, %, inherit
height Sets the height of an HTML element auto, length, %, inherit
max-width Sets the maximum width of an HTML element none, length, %, inherit
min-width Sets the minimum width of an HTML element length, %, inherit
max-height Sets the maximum height of an HTML element none, length, %, inherit
min-height Sets the minimum height of an HTML element length, %, inherit

How To Set An Element's Dimensions

The CSS example below shows you how to set both the width and height of an HTML element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box-one{
width: 	100px;
height:	100px;
margin:	5px;
padding:	0;
border:	1px solid black;
}
.box-two{
width: 	150px;
height:	150px;
margin:	5px;
padding:	0;
border:	1px solid red;
}

</style>

</head>
<body>

<div class="box-one">
<p>
This is a paragraph.
</p>
</div>

<div class="box-two">
<p>
This is another paragraph.
</p>

</div>

</body>
</html>

This is a paragraph.

This is another paragraph.


Overflowing Content

When there is more content within an element than a set height allows, the excess content will overflow. The example below shows an example of this.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
width: 	100px;
height:	100px;
margin:	5px 5px 125px 5px;
padding: 	0;
border:	1px solid black;
}

</style>

</head>
<body>

<div class="box">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>
</div>

</div>

</body>
</html>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.


Image Sizes

The example below shows you how to apply width and height properties to images (which are HTML elements also).

It is recommended that you set the margin and padding properties to images. It is also recommended to apply a border property with a value of none to your images, unless you want to set a border. This is because some web browsers will automatically apply a border to images unless specified otherwise.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

img{
width:	128px;
height:	128px;
margin:	5px;
padding:	0;
border:	none;
}
img.two{
width:	192px;
height:	192px;
margin:	5px;
padding:	0;
border:	none;
}

</style>

</head>
<body>

<p>
<img src="../images/circle-square.png" alt="image" />
</p>

<p>
<img src="../images/circle-square.png" alt="image" class="two" />
</p>

</body>
</html>

image

image