Cascading Style Sheets and Box Properties

"Think Outside the Box" - this has become such a cliche in business, but in CSS you want to stay inside of it. All elements in HTML generate a rectangular box. This is called the element box. This box describes the amount of space the element and its properties occupy within the layout of the document.

Each element or box will influence every other box in the document. For example, if the first element is two inches tall, the element to follow it will be two inches from the top of the document. If the first element shrinks to one inch, the following element will then be one inch from the top of the document.

Things are Changing

With Cascading Style Sheets, Web authors can now have more control over how their text is displayed on the page. Even to the extent of placing elements one on top of the other.

There are several CSS properties you can use to affect the shape and location of your text elements:

• width


• height


• margin


• margin-top, margin-left, margin-bottom, margin-right


• padding


• padding-top, padding-left, padding-bottom, padding-right

width

The width of an element is the distance from the left inner edge of the element to the right inner edge.

When you set the width on an element, you don't need to use tables to create text boxes.

<p style="width : 100px; border : none; background-color : #cccccc;">

This box is created using the width tag on the paragraph. 100 pixels wide.

</p>

height

The height of an element is the distance from the top inner edge of the element to the bottom inner edge. Just like with the width, you can create table-like elements within your document. If you create an element where the defined height is actually shorter than the text, the element will be taller than defined. This is exactly like how tables work.

<p style="height : 100px; border : none; background-color : #cccccc;">

Created with CSS. 100 pixels tall.

</p>

margin

Margins add space around the outer edge of the element. Using the margin property, you can define all four margins to be the same. Or you can set all four separately with the same property:

margin : top right bottom left;

Or if you only want to set the margin on one specific side, you can use the margin-* properties (ie. margin-top, margin-right, margin-bottom, margin-left).

<p style="border : none; background-color : #cccccc; margin : 15px;">

This paragraph has a 15 pixel margin around it.

</p>

padding

Padding adds space around the inner edge of the element. Using the padding property, you can define all four sides to have the same padding, or you can set all four separately with the same property:

padding : top right bottom left;

Of if you only want to set the padding on one specific side, you can use the padding-* properties (ie. padding-left, padding-top, padding-right, padding-bottom).

When you look at the following paragraph, compare it to the margin example above. You'll notice that when a paragraph has padding there is more background. When the paragraph has margins, there is less background.

<p style="border : none; background-color : #cccccc; padding : 15px;">

This paragraph has a 15 pixel padding around it.

</p>

Cascading Style Sheets can help you design your pages. Use these properties to create stylish pages that have the text exactly where you want them.

The Properties Used

The width paragraph

width : 100px; border : none; background-color : #cccccc;



The height paragraph

height : 100px; border : none; background-color : #cccccc;



The margin paragraph

border : none; background-color : #cccccc; margin : 15px;



The padding paragraph

border : none; background-color : #cccccc; padding : 15px;