CSS Box Model & Visibility W3C

more related media: books

Back to Basics

In February I wrote an article on HTML5 Layout and realized that I had never included the basics of the CSS Box Mode and content Visibility on this site, so here goes.

The CSS Box

Although the CSS Box Model can be applied to any html element you are probably going to use it the most for your main layout elements. You can give each element a class or an id. If you are going to use the element only once on your page then you might as well go ahead and give it an id.
In the CSS a class is represented by a period . and an id is represented by a hash symbol #

Lets start with the web page first. You will need to first place a div on the web page:

<div>content</div>

Now include the the id in this case I am going to use header

<div id="header">content</div>

The CSS for the following example:

#header{
width: 500px;
height: auto;
border-style: solid;
border-color:#F60;
border-width: 2px;
padding: 20px;
}

the shorthand for the border is this:

border:2px solid #f60;

Individual sides can be written like this:

border-left-style: solid;
border-left--color:#F60;
border-left--width: 2px;

Border Style

BORDER: The border is the red outline around the box. The border style is solid which creates a single line around the box.

PADDING: The padding is the space between the text (or other content) and the border.

WIDTH: The original width of the box was 500px but it is now 544px because the width of the left and right borders which is 4px along with the width of the left and right padding which is 40px increased the size. This width will be the same in all browsers except IE6.

In IE6 (I know why bother) the width remains 500px and the content area is reduced in size as you include borders and padding.

HEIGHT: The height is set to auto and it will expand depending upon the content.

If you wish the height to be a 100% you would also need to atribute100% to both the body and the html:

html{

height: 100%;

}

bodyl{

height: 100%;

}

#headerl{

height: 100%;

}

border-style: double;

border-style: dashed;

The appearance of the following borders does not work well in most designs.
They look rather tacky.

border-style: groove;

border-style: ridge;

border-style: inset

border-style: outset;

Inherit

In some cases inherit is the default, but for borders it is not, it needs to be stated within the style then the element takes on the style of the parent element.

selector{
border-style:inhert ;
}

None

Exactly what it says, there is no border

Hidden

Why would you want to hide a border? It probably has many uses but the first that comes to mind is using it for a rollover effect

Margins

The following box has a left margin. Margins are between elements and do not effect the size of the box.

margin-left: 20px;

Collapsing Margins

Two touching margins with positive values
When there are two vertical elements with touching margins then the margins collapse (combine for form a single margin) and take on the size of the larger margin .

Two touching margins with negitive values
Take on the margin with the highest value

Two touching margins, one with a positive value and another with a negative value
margins are added together to get the final value

Collasping margins do not apply to the following:

absolutely positioned elements
floated elements
inline-block elements

Outlines

You cannot define a side (left, right, top, bottom) for an outline. An outline is always on all sides
Outlines do not increase the size of the box or really take up any space.
Both of the boxes below have a margin-left of 20px. The outline is actually in part of the margin area.
If I only include one break below this text the outline will cover part of the text.

The blue area is the outline
margin-left: 20px;

Without outline
margin-left: 20px;

Visibility

When using the box as a main layout element how do you get your text to stay in the box. the easist way to do this is to just give to this:

selector{
height: auto;
}

Overflow Property

The values for the overflow propertiy are: visible, hidden, scroll, auto

selector{
overflow: visible;
}

visible

If give your box a height this value insures that all of the content will show even if it
is more than the height of the box. The content will overlap beyond the box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus tempor sem, in pulvinar massa eleifend ornare. Sed sit amet feugiat est. Quisque suscipit purus vitae augue viverra ornare. Praesent magna est, ultricies eu commodo facilisis, facilisis sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac augue turpis, id laoreet nulla. Aliquam erat volutpat. Vestibulum nec tortor augue. Vivamus euismod tincidunt pellentesque. Nulla id nunc id elit blandit varius vel sit amet tellus. Quisque suscipit purus vitae augue viverra ornare. Praesent magna est, ultricies eu commodo facilisis, facilisis sit amet ligula.

hidden

Any additional content that takes up more space than the boxes height is cut off

scroll

This value allows the content to scroll

auto

This value is browser dependent and could cause the content to scroll

height auto - do not include the overflow property

If you just want the box to get bigger to accommodate the content then do not
include the overflow property in the styles and place the height of the box at auto
selector {
height: auto; }

CSS Box Model & Visibility W3C

Back to Basics

The CSS Box