"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. Put the following HTML into your Web page to see the margin property in action:
<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.
When you put the following paragraph into your Web page, 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.
Sample CSS Properties
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;
Next Page: CSS Positioning > 1, 2, 3
