Dimension

Property Value
width auto, px, %
max-width none, px, %
min-width none, px, %
height auto, px, %
max-height none, px, %
min-height none, px, %



Width & Height

The width and height properties allows you to set the dimension of a box.


Example 1


<head>
<style>
#p1
{
width:200px;height:100px;
}

#p2
{
width:120px;height:50px;
}

</style>
</head>
<body>
<p id="p1" >
Paragraph Box One
Width:200px
Height:100px
</p>

<p id="p2" >
Paragraph Box Two
Width:120px
Height:50px
</p>
</body>




Displays

Paragraph Box One
Width:200px
Height:100px

Displays

Paragraph Box Two
Width:120px
Height:50px





Example 2


<head>
<style>
#img1
{
border:2px solid red;width:300px;height:120px;
}
#img2
{
border:2px solid red;width:240px;height:140px;
}
</style>
</head>

<body>
<img id="img1" src="cakes.jpg"/>
<img id="img2" src="star1.jpg"/>
</body>


Displays

Displays





Max-Width and Max-Height

The max-width and max-height properties allows you to set the maximum width and height of a box.


Example


<head>
<style>
#img2
{
max-width:100px;max-height:80px;border:2px solid red;
}
</style>
</head>

<body>
//normal size
<img src="star.jpg" width="140" height="140" />

//maximum size
<img id="img2" src="star.jpg"/>
</body>


Displays

Normal Size Maximum Size




Min-Width and Min-Height

The min-width and min-height properties allows you to set the minimum width and height of a box.



Example


<head>
<style>
#pmin
{
border:2px solid red;min-width:70px;min-height:40px;
}
</style>
</head>


<body>

<p style="border:2px solid red" >
This paragraph box is normal size.
</p>

<p id="pmin" >
This paragraph box is minimum size
</p>

</body>

Displays

This paragraph box is normal size.


This paragraph box is minimum size.




Now do the Exercise!