Going The Extra Mile
Spacing
So by now you have your page and all your text styled and formatted the way you want. Now it's time to start giving parts of your page room to breathe, by spacing them out with margins and padding. Henceforth, you will be able to space out all your page's parts down to the pixel.
-
Width
-
Height
-
Float
-
Clear
Width
| Syntax: | width: <value> |
|---|---|
| Possible Values: | <length> | <percentage> | auto |
| Initial Value: | auto |
| Applies to: | Block-level and replaced elements |
| Inherited: | No |
Each block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the width property is auto, which results in the element's intrinsic width (i.e., the width of the element itself, for example the width of an image). Percentages refer to the parent element's width. Negative values are not allowed.
This property could be used to give common widths to some INPUT elements, such as submit and reset buttons:
INPUT.button { width: 10em }
Height
| Syntax: | height: <value> |
|---|---|
| Possible Values: | <length> | auto |
| Initial Value: | auto |
| Applies to: | Block-level and replaced elements |
| Inherited: | No |
Each block-level or replaced element can be given a height, specified as a length or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the height property is auto, which results in the element's intrinsic height (i.e., the height of the element itself, for example the height of an image). Negative lengths are not allowed.
As with the width property, height can be used to scale an image:
IMG.foo { width: 40px; height: 40px }
In most cases, authors are advised to scale the image in an image editing program, since browsers will not likely scale images with high quality, and since scaling down causes the user to download an unnecessarily large file. However, scaling through the width and height properties is a useful option for user-defined style sheets in order to overcome vision problems.
Float
| Syntax: | float: <value> |
|---|---|
| Possible Values: | left | right | none |
| Initial Value: | none |
| Applies to: | All elements |
| Inherited: | No |
The float property allows authors to wrap text around an element. This is identical in purpose to HTML 3.2's ALIGN=left and ALIGN=right for the IMG element, but CSS1 allows all elements to "float," not just the images and tables that HTML 3.2 allows.
Clear
| Syntax: | clear: <value> |
|---|---|
| Possible Values: | none | left | right | both |
| Initial Value: | none |
| Applies to: | All elements |
| Inherited: | No |
The clear property specifies if an element allows floating elements to its sides. A value of left moves the element below any floating element on its left; right acts similarly for floating elements on the right. Other values are none, which is the initial value, and both, which moves the element below floating elements on both of its sides. This property is similar in function to HTML 3.2's <BR CLEAR=left|right|all|none>, but it can be applied to all elements.