CSS Height and width

css CSS Height and width Width Css

Height and width

This div has 100px width and 100px height is applied.

400px width and 100px height is apply on his div .

Width and Height applied in following

Example


<head>
   <style>
       
.width{ 
	width: 600px;
	height: 200px;
background-color: gray;
color:white; 
 }
   </style>
</head>
<body>
<div class=width> 
 600px width and 200px height is apply on this div .
</div>  
</body>
</html>

Max Width

In above example if you run the code and smaller the browser window then horizontal scroll bar is created. But when you apply max-width scroll bar is not created and you can easily see the complete content of page in front of you.

Hint (smaller the browser window less than 600px then see the difference between width and max-width) Example

<head>
   <style>
.width{ 
max-width: 600px;
	height: 200px;    
background-color: purple;
color:white; 
 }
  </style>
</head>
<body>
<div class=width> 
 600px width and 200px height is apply on this div .
</div>  
</body>
</html>

Note

Paddings, margins and borders are not include in Width and Height. They only define the width and height of the content area of element.

Max height

The max-height property in CSS is used to set the maximum height of a specified element. Max height override the height value.

Example

<html>
<head>
     <style>   
		div {
			height: 600px;
			max-height: 100px;
			background: #0CBFFC;
		}
		p {
			max-height: 50px;
			background: #F60E8C;
		} 		
    </style>
</head>
<body>	
	<div>only max-height value effect on the content </div>
    <p>write more text to see this effect
    </p>  	
</body>
</html>

Important

Only max-height value effect the content even you increase height value than max-height.

Min Height

Only min-height value effect the content. Rather you decrease height value than min-height i.e is height: 300px; and min-height: 400px; then only min-height value is applicable on content.


<html >
<head>
    <style>   
		div {
			height: 300px;
			min-height: 400px;
			background: #0CBFFC;
		}
				
    </style>
</head>
<body>	
	<div> set height value less than min-height value you can see that min-height work </div> 	

</body>
</html>

Min-Width

Only min-width value effect the content. Rather you decrease width value than min-width i.e is width: 400px; and min-width: 500px; then only min-width value is applicable on content.


<html >
<head>
    <style>   
		div {
			height: 400px;
			min-height: 500px;
			background: #0CBFFC;
		}
				
    </style>
</head>
<body>	
	<div> set width  less than min-width value you can see that min-width work </div> 	

</body>
</html>

css Width Css Chapter Next »