height and width


name Description
height Sets the height of a box
width Sets the width of a box
line-height Sets the height of a line of text (like leading in a layout program)
max-height Sets the maximum height for a box
min-height Sets the minimum height for a box
max-width Sets the maximum width for a box
min-width Sets the minimum width for a box

The height and width properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto. the default value being auto


	      	p.one {
			width:200px; height:100px;
			padding:5px; margin:10px;
			border-style:solid; border-color:#000000; border-width:2px;}
			p.two {
			width:300px; height:100px;
			padding:5px; margin:10px;
			border-style:solid; border-color:#000000; border-width:2px;}
	      

The line - height Property


The line - height property is one of the most important properties when laying out text. It allows you to increase the space between lines of text (


The value of the line - height property can be a length or a percentage. It is a good idea to specify this property in the same measurement in which you specify the size of your text.


	      	p.two {
			line-height:16px;}
			p.three {
			line-height:28px;}
	      

The max - width and min - width Properties


The max - width and min - width properties allow you to specify a maximum and a minimum width for a box. This should be particularly useful if you want to create parts of pages that stretch and shrink to fit the size of users ' screens. The max - width property will stop a box from being so wide that it is hard to read , and min - width will help prevent boxes from being so narrow that they are unreadable.


The value of these properties can be a number, a length, or a percentage, and negative values are not allowed. For example, take a look at the following rule, which specifies that a <div> element may not be less than 200 pixels wide and no wider than 500 pixels wide


	      	div {min-width:200px;
			max-width:500px;
			padding:5px;
			border:1px solid #000000;}
	      

The min - height and max - height Properties



The min-height and max-height properties correspond with the min-width and max-width properties, but specify a minimum height and maximum height for the box.


The value of these properties can be a number, a length, or a percentage, and negative values are not allowed.


	      	div {min-height:50px;
			max-height:200px;
			padding:5px;
			border:1px solid #000000;}
	      

The overflow Property


when you control the size of a box, the content you want to fit in the box might require more space than you have allowed for it. This not only happens with the min-height and max-height or min-width and max-width properties, but also for a number of other reasons.


The overflow property was designed to deal with these situations and can take one of the values shown in the table that follows.


name Description
hidden The overflowing content is hidden.
scroll The box is given scrollbars to allow users to scroll to see the content.

		   	div {max-height:75px;
			max-width:250px;
			padding:5px;
			margin:10px;
			border:1px solid #000000;}
			div.one {overflow:hidden;}
			div.two {overflow:scroll;}
		   

	      	<!DOCTYPE html>
			<html>
			<head>
			<title> CSS Example </title>
			<link rel="stylesheet" type="text/css" href="style.css" />
			</head>
			<body>
			<p> You are about to see some <code class="codeInText"> codeInText </code>
			followed by some <span class="importantWords"> importantWords </span> , and the
			font for a <span class="keystroke"> keystroke </span> . </p>
			<p> Next you will see some foreground code: </p>
			<code class="codeForeground"> p {font-family:arial, sans-serif;
			font-weight:bold;} </code>
			<p> Next you will see some background code: </p>
			<code class="codeBackground"> p {font-family:arial, sans-serif;
			font-weight:bold;} </code>
			<p class="boxText"> This is some boxed text for important statements. </p>
			<p class="background"> Here is a background comment or aside. </p>
			</body>
			</html>
	      

	      	<!DOCTYPE html>
			<html>
			<head>
			<title> Font test </title>
			</head>
			<body>
			<table>
			<tr>
			<th> Quantity </th>
			<th> Ingredient </th>
			</tr>
			<tr class="odd">
			<td> 3 </td>
			<td> Eggs </td>
			</tr>
			<tr>
			<td> 100ml </td>
			<td> Milk </td>
			</tr>
			<tr class="odd">
			<td> 200g </td>
			<td> Spinach </td>
			</tr>
			<tr>
			<td> 1 pinch </td>
			<td> Cinnamon </td>
			</tr>
			</table>
			</body>
			</html>