Learning CSS - Step 2 - Box Model and Background Images

[Mack]

Learning CSS
Part 2: Box Model and Background Images
Originally written by my friend and co-worker: Web design by JL Design


Box Model, Margins and Padding
Every element in HTML has what is called a box model. A box model consists of height, width, padding, margin, and border.

Box Model


In the image shown, the pink area is the visible area of each HTML element, span, p, a, table, etc. The width, height, and border of the element is self-explanatory. The padding and margin are similar, yet different. They are similar in that they add space around the width and height of an element, yet they are different in how they do it. Padding adds the space to the inside of the element. Margin adds the space to the outside of the element. For example, think of two polaroids placed next to each other. The white space around the picture is the Padding, making the element larger than it actually is. The space between the two polaroids is the Margin.

Note: padding, margin, and border all add to the height and width of the element. Also, FF reads padding and squeezes the content in, IE6 reads padding and pushes the border out.

Border consists of border-width, border-color, border-style. They can be truncated into one line:

border: 1px solid #000000;

Size, style and color. Border must be declared in this order.

For margin and padding, there are margin-left, margin-right, margin-bottom, and margin-top, same for padding. However, there is also a truncated version of these as well:

margin: 10px;
padding: 10px;

The code above specifies all edges have 10px margin/padding.

margin: 10px 5px;
padding: 10px 5px;

The code above specifies top and bottom have a 10px margin/padding, and left and right have a 5px margin/padding.

margin: 1px 2px 3px 4px;
padding: 1px 2px 3px 4px;

The code above specifies the margin/padding size of the top, right, bottom and left edges. They go clockwise.


Box Model Measurements
There are a few different ways to specify the size of an element: em, px, and %.
em refers to the em-spacing of the font. em-spacing refers to a space the size of an "m" in the font. The size of an em-space is entirely dependent on the size of the font (specifically the p tag), therefore, if the font size increases, so does the size of the boxes using em as a measurement. And the default size for each font varies for each browser. Got that? Good. Moving on…

px is the least confusing. What you type is what you get. 10px is 10px.

% is a measurement based on the size of the containing element, whether it be body, div, or anything else. Declare 25% height or width on an element and that element will be 25% high or wide in its parent element. The actual px values will vary depending on the size of the parent element, but the % will stay the same.


Elastic, Fixed, and Fluid Sites
There are three types of websites: Elastic, Fixed and Fluid.
Fixed has all values in px. Nothing moves, nothing changes.
Elastic has all values in %. Everything is based on the size of the browser window.
Fluid has all values in em and %. The layout changes with the size of the browser window and the font changes with the user's default settings.


Background Image Placement
Because every html element has a box model, every element can also have a background image and color. Specified as background, background-color, background-image, background-position, background-repeat. Everything can be condensed into one call:

background: #003300 url(images/image.jpg) no-repeat 20px 50%;

The order is and must be as follows: color, image url, repetition, left position, top position. The background color will always appear beneath the background image. The background image can be told to repeat-x, repeat-y, repeat, or no-repeat.

The position of the background image is specified by the last 2 numbers. You can specifiy these as left or right and top or bottom. If you use pixels (say 25px 75px) to place the background image, the background image will be placed 25px to the left and 75px down, based on the top left pixel of the image.

If you use % (say 10% 100%), the image will be placed 10% left and 100% down, however, it is not based on the top left pixel. For 10% left, it is based on a location that is at the 10% mark of the entire width of the image. For 100% top, it is based on a location that is at the 100% mark of the entire height of the image (positioning it flush with the bottom of the element). 0%, 0% mark. 25%, 25% mark and so on.

[ianm]

cool - you should publish these in an ebook :)

The GDF Tutorials and Handy Hints For Designers

[petra]

are there any more I did a search

[LeadMagnet]

Well done.
1 thing to add to that though:

margin: 1px 2px 3px;
padding: 1px 2px 3px;

This will specify a margin/padding of 1px for the top, 2px for the left and right, and 3px for the bottom.

[Mack]

Thats a good addition.

I do have 1 more i can post, we will see what my schedule looks like tomorrow.