Finishing The Box ModelS2C Home « Finishing The Box Model

In lessons 7, 8 and 9 of the CSS Basic Tutorials we looked at the box model, and the padding, margin and border properties which form the periphery of the box model. In this lesson we take a final look at the box model by exploring box model dimensions. We look at all the CSS box model dimension properties and see the impact these have on our images and text.

Box Model Dimension CSS Properties

height

Specifies the content height for a box model element.

min-height

Specifies a minimum content height for a box model element.

max-height

Specifies a maximum content height for a box model element.

width

Specifies the content width for a box model element.

min-width

Specifies a minimum content width for a box model element.

max-width

Specifies a maximum content width for a box model element.

line-height

Specifies the minimal height of line boxes within the element.

vertical-align

Specifies the vertical positioning inside a line box for boxes generated by an inline-level element.

Viewing Box Model Dimension Properties

Lets see some examples of using the above box model dimension CSS properties.

Open up the file with Notepad we created and tested in Lesson 1: Backgrounds.

You saved the file to your computer in the C:\_CSSIntermediate folder as lesson_1_csspage.html

Copy and paste the following code into the reopened file, overwriting the existing text.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for Box Model Dimensions follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS - Lesson 2 - A Final Look At The Box Model</title>

<style type="text/css">

/* Set minimum and maximum height and width for the body element */
body {
  background-color: orange;
  min-height: 300px;
  max-height: 800px;
  min-width: 500px;
  max-width: 750px;
}

/* Float a div to the right */
div {
  background-color: white;
  float: right;
  height: 100px;
  width: 150px;
  overflow: auto;
}

/* Set height and width for our images */
img {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
  height: 150px;
  width: 200px;
}

#img1 {
  vertical-align: text-top;
  height: 75px;
  width: 100px;
}

#img2 {
  vertical-align: text-bottom;
  height: 75px;
  width: 100px;
}

#para1 {
  line-height: 15px;
}

#para2 {
  line-height: 30px;
}

</style>

</head>
<body>
<h1>CSS Box Model Dimension Properties</h1>
<h2>Setting Height and Width Properties</h2>
<p id="para1" >Image height and width using generic img style. Line height set to 
15px. Image height and width using generic img style.  Line height set to 15px.
<img src="http://server2client.com/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" /></p>
<p id="para2" >Line height set to 30px. Line height set to 30px.
Line height set to 30px. Line height set to 30px. Line height set to 30px. 
Line height set to 30px. Line height set to 30px.</p>
<h2>Image with vertical-align of text-top</h2>
<p>
<img id="img1" src="http://server2client.com/images/fishpiesmall.jpg"
    alt="Fish Pie" />Look at the vertical alignment of the text.</p>
<h2>Image with vertical-align of text-bottom</h2>
<p>
<img id="img2" src="http://server2client.com/images/fishpiesmall.jpg"
    alt="Fish Pie" />Look at the vertical alignment of the text.</p>
<div>
<p>Some filler text.Some filler text.Some filler text.Some filler text.
Some filler text.Some filler text.Some filler text.Some filler text.
Some filler text.Some filler text.</p>
</div>
</body>
</html>

Save the file in the C:\_CSSIntermediate folder as lesson_2_csspage.html and close the Notepad.

save final box model

Viewing Our Saved File

From the C:\_CSSIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following images. We have used two screenshots here to show the entire screen.

When you cut and paste the code, adjust the screen size to see the effects of the dimension settings.

final box model

Reviewing The Code

The width and height CSS properties allow us to set the dimensions for the content part of a box element. When calculating overall width and height remember to include any margins, padding and borders in your calculations.

There are some gotchas when using the height CSS property and text. Remember that a user can change the font size that they view text in within their browser so when inserting text in a box with a particular height make sure you use the overflow CSS property to deal with this.

The min and max height/width properties allow us to set a finite size for our boxes or as in this case the whole viewable screen (via the body element).

The other CSS properties we used allow us to set a line-height giving us control over line spacing and the vertical-align property which allows us to set a vertical baseline for our content wherever we like.

Mess around with the CSS and change some of the style setting to see the effects differing dimensions have. Also try removing the overflow CSS property from our box and see the effects of changing the browser font size.

Related Tutorials

CSS Basic Tutorials- Lesson 7 - Understanding The Box Model

CSS Basic Tutorials- Lesson 8 - Padding & Margins

CSS Basic Tutorials- Lesson 9 - Borders

What's Next?

In the next lesson we we look at pseudo selectors, their purpose and how to use them.

CSS Reference

Box Model Dimensions

The height CSS Property

The min-height CSS Property

The max-height CSS Property

The width CSS Property

The min-width CSS Property

The max-width CSS Property

The line-height CSS Property

The vertical-align CSS Property

go to home page Homepage go to top of page Top