HTML CSS Dimensions

Height and Width are used to control the size of an element in CSS. This is calculated by the web browser the viewer is using. Dimensions can be calculated either by using length values such as pixels (px= picture elements) or centimeters (cm), or by percentages (%). Height and Width do not set the border or the padding or the margins. They determine the content area inside of the border, padding and margins. Here is a link to the lesson on the CSS Box Model in case you need a refresher.

Here is a demonstration. The Div element has a 50% width and a 200px height. Here is the code; 
	div.demo {
	    width: 50%;
	    height: 200px;
	    border: ridge 5px blue;
	}
I then just create a <div class="demo"> </div> set of tags to surround the text. The 50% selector is based on the area I am using for text, within my Style sheet declarations for this page, not the screen width. In the style sheet I am using to style this page, the content division is 800px wide, thus 50% would be 400px. You can see the width by looking at the horizontal rules I'm using. I don't use the whole page as this makes it easier to read. Here is the code for my content style; 
		div.content {
			width: 800px;
			margin-top: 25px;
			margin-left: 20px;
			font-size: 15px;
			line-height: 160%;
		}

  Example; min-width If you want to over-ride the values set by the parent style width

    As you can see, the box becomes wider than the parent style. 
	div.demoMinW {
	    min-width: 999px;
	    height: 200px;
	    border: ridge 5px red;
	}
An issue here is if the browser window is smaller than the Div element. Try miminizing your browser so the Box is smaller than the window and you should see some scroll bars appear so you can see the entire box.

  Example; max-width

    As you can see, the box does not become become wider than the parent style. 
	div.demoMaxW {
	    max-width: 999px;
	    height: 200px;
	    border: ridge 5px green ;
	}

line-height: value;

Controls height between lines

Examples 


	<div class="big">
				This is  a 300% line height
	</div>



	<div class="small">
				This is 50% line height
	</div>
Here is the style code, which is the normal, default line height.. 
	div.big{
			line-height:300%;
	}
	div.small{
			line-height:50%;
	}

I hope you will join us for the next lesson Lesson 15) Borders

Additional Resources