CSS Dimentions
The CSS provides several properties such as width, height, max-width and max-height etc. that allows you to control the dimension of a box. The following section will describe you how to use these properties to create a better web page layout.
The width and height Properties
The Width and height properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.
<!DOCTYPE html>
<head>
<title>The Width and Height Property</title>
<style type="text/css">
.width_height{
width: 300px;
height: 150px;
background: #F60;
color:#FFF;
padding:10px;
}
</style>
</head>

<body>

<div class="width_height">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</div>

</body>
</html> 
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
The max-height Property
The max-height property allows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.
<!DOCTYPE html>
<head>
<title>The max-height Property</title>

<style type="text/css">

.max_height{ 
width: 300px; 
max-height:80px; 
background: #F60; 
color:#000; 
padding:10px; 
}

</style>

</head>
<body>

<div class="max_height">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.

</div>

</body>
</html>  
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
The min-height Property
The min-height property allows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.
<!DOCTYPE html>
<head>
<title>The min-height Property</title>
 
<style type="text/css">
 
.min_height{ 
width: 300px; 
min-height:200px; 
background: #F60; 
color:#FFF; 
padding:10px; 
}
 
</style>
</head>
<body>
 
<div class="min_height">
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 
</div>
 
</body>
</html>  
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
The max-width Property
The max-width property allows you to specify the maximum content width of a box. This maximum width does not include paddings, borders, or margins.
<!DOCTYPE html>
<head>
<title>The max-width Property</title>
 
<style type="text/css">
 
.max_width{ 
max-width:200px; 
background: #F60; 
color:#FFF; 
padding:10px; 
}
 
</style>
</head>
<body>
 
<div class="max_width">
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 
</div>
 
</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
The min-width Property
The min-width property allows you to specify the minimum content width of a box. This minimum width does not include paddings, borders, or margins.
<!DOCTYPE html>
<head>
<title>The min-width Property</title>
 
<style type="text/css">
 
.min_width{ 
min-width:300px; 
background: #F60; 
color:#FFF; 
padding:10px; 
}
 
</style>
</head>
<body>
 
<div class="min_width">
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 
</div>
 
</body>
</html>  
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.