My Web Training

📖 The Box Model

CSS treats all elements as if they were a box. Each box is made up of a content area which holds the text or images that will show up on the page. Each box also has an option of having a border, padding and margins.

Box Dimensions

content-box

You can specify the size of a box on the page using the height and width properties. These may be specified in pixels, ems or percentages:

aside {
	height: 100%;
	width: 300px;
	margin: 25px;
	padding: 25px;
	border: 2px navy solid;
}

If the box-sizing property is not used, then the height and width properties will apply to the content box - that is any margins, padding and borders will be outside of the specified dimensions. In the example above, that would mean that aside would take up 300 pixels for the width of the content plus 50 pixels of padding (left and right 25 each) plus 4 pixels of border (2px each left and right) and 50 pixels of margin (25px each left and right) for a total of 404px.

border-box

You can use the box-sizing attribute to apply height and width to the border box instead which includes the content, padding and border.

aside {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 100%;
	width: 300px;
	margin: 25px;
	padding: 25px;
	border: 2px navy solid;
}

In the example above, the entire aside is 300 pixels wide. 4 pixels are for the border and 50 pixels for padding, leaving 246 pixels for the content. Note that the margin is still outside the width and height so that the total width taken up by aside would now be 350 pixels.

Controlling the Size of the Box

You can also use max-height, max-width, min-height and min-width to limit the size of an element when using a percentage value. For example, you may want your main content to cover the entire width of the page, except for readers who have a very large, widescreen monitor. To avoid very long and strung out lines of text, you may want to limit the width of the section to no more than 1200px:

main {
	width: 100%;
	max-width: 1200px;
}

Alternately, you may want your navigation sidebar to take up 15% of the width of the page, but at very small sizes, the links may be too small to fit on one line.

nav {
	width: 15%;
	min-width: 12em;
	float: left;
}

Height Attribute

Be cautious when using the height attribute as it can result in some content being hidden if the content is larger than the allocated space. Typically, most designers do not use the height property very frequently.

If your content is larger than the available space, you can use the overflow property to specify what to do with the content that does not fit. The overflow property has 4 possible values.

• visible (default) - allows the content to hang out over the element box. This can result in it overlapping other content or spilling out past the border, padding and margins.
• hidden - any content that does not fit is not visible to the user. The use has no way to view the content.
• scroll - adds scrollbars to the box so the user can scroll to see the hidden content. Scrollbars will be visible regardless of whether there is any content outside the element box.
• auto - lets the browser decide how to handle overflow. Typically scrollbars are added when needed and omitted when the content fits within the element box.

Padding and Margin

Padding refers to the space between the content and the border. Margin refers to the space between the border and other elements on the page. Both may be specified using pixels, ems or percentages. As with the border, you can even specify padding and margins differently for each side of the box by adding the appropriate qualifier (padding-right, margin-top, etc.). You can specify a single measurement to be applied to all 4 sides of the element box.

main {
	padding: 20px; 
}

If you specify 2 numbers, the first one applies to top and bottom and the second to left and right.

main {
	margin: 0 5%;
}

You can also specify all 4 sides beginning at the top and moving clockwise around the element box (top, right, bottom, left).

main {
	padding: 0 50px 20px 10px;
}

Border

By default, no border is normally placed around an element. To add a border, you can use the following style properties:

border-color: black;

border-width: 1px;

border-style: solid;

border-radius: 10px;

You can also specify different sides of the border to have different attributes, just insert the word -top, -left, -right, or -bottom after border in the above attributes.

Border Image

Uses an image for the border. Not supported in Internet Explorer and requires vendor prefixes for Safari and Chrome (-webkit-), Firefox (-moz-) and Opera (-o-)

property { border-image: url(filename) slicelines outset repeat; }

Where filename is the name of the image file to use for the borderslicelines is the positions of the slicelines that divide the image into sections listed in pixels and can include from 1 to 4 values (top, right, bottom, left)outset is the distance that the image hangs out over the border repeat is how the image should fill in the sides.

• stretch (stretches the image to fill the allocated space)
• repeat (tiles image to fill the space)
• round (tiles but stretches or shrinks a little so no partial images are used)
• Default is repeat. Round is not supported in Safari and Chrome at this time

Box Shadow

box-shadow: h-shadow v-shadow blur spread color inset;

• adds shadow to boxes
• values are usually specified in pixels
• h-shadow is horizontal offset - required - may be negative
• v-shadow is vertical offset - required - may be negative
• blur is blur distance - optional
• spread is spread distance - optional
• color is color - optional
• inset changes the shadow from outset to inset - optional
• supported in all browsers

Additional Resources

• CSS Box Model Video tutorial