Style Sheets Properties Guide
=Box Properties=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
Main Index |
Style Sheet Index |
Top Of Tree |
Tag Index |
Tag History
Box properties treat all block-level formatting elements like a virtual 'box'.
The height and width of the box is determined by (going from inner-most
dimension outward) the height and width of the contained elements (text
and/or images) plus heights and widths for space around the element
('padding'), plus the height and widths created by added
borders ('border'), along with exterior margin values
('margin') relative to elements exterior to the virtual box.
This portion of the Box properties allows size control over elements as well as
flow control over subsequent elements in relation to the current element.
- width
[IE | N4B3]
- Applicable Tags: Block-Level and Replaced Elements
- HTML Equivalent: WIDTH
attribute used in Replaced Elements.
- Inherit From Parent: No
- Default Value: auto unless the element has an assigned dimension.
- What Is It?
- This property may be applied to text elements, but is more applicable to Replaced Elements
(images, etc.) The width specified may scale the element to fit the given dimension. If the
'height' property has a value of 'auto', the original aspect ratio of the element should
be preserved. The spec says this should not apply to in-line elements
- Example
- Ext/Doc: img.size1 { width:
75px }
- In-Line: <img STYLE="width:
75px">
- Browser Notes
- - Netscape 4 Beta 2 Very limited support for this property.
It supports it for the HR tag only.
- Netscape 4 Beta 3 The box properties appear to only
work with in-line and block level elements, but not at all with replaced elements.
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| auto |
calculated |
IE | N4B3 |
The width of the element will be determined by the browser. |
| [length] |
calculated |
IE | N4B3 |
Refers to either an absolute width measurement or a relative measurement
based on the current element's font size. Please see the section on
Length Units for more details on acceptable unit measures. |
| [percentage] |
calculated |
IE | N4B3 |
Refers to a percentage of the parent element's width. |
- height
[IE | N]
- Applicable Tags: Block-Level and Replaced Elements
- HTML Equivalent:
HEIGHT attribute used in Replaced Elements.
- Inherit From Parent: No
- Default Value: auto
- What Is It?
- This property may be applied to text elements, but is more applicable to Replaced Elements
(images, etc.) The height specified may scale the element to fit the given dimension. If the
'width' property has a value of 'auto', the original aspect ratio of the element should
be preserved.
- Example
- Ext/Doc: img.size2 { height:
75px }
- In-Line: <img STYLE="height:
75px">
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| auto |
calculated |
IE | N |
The height of the element will be determined by the browser. |
| [length] |
calculated |
IE | N |
Refers to either an absolute width measurement or a relative measurement
based on the current element's font size. Please see the section on
Length Units for more details on acceptable unit measures. |
| [percentage] |
calculated |
IE | N |
Refers to a percentage of the parent element's height. |
- float [IE | N4B3]
- Applicable Tags: ALL
- HTML Equivalent:
<ALIGN=right,left> attributes used in Replaced Elements.
- Inherit From Parent: No
- Default Value: none
- What Is It?
- This property allows other elements to wrap around an element while it "floats"
along the right or left side of the display device. When a value of
'left' or 'right'
is assigned, the element is treated as Block-Level (the 'display' property
will be ignored.)
- Example
- Ext/Doc: img.test { float: left }
- In-Line: <img SRC="image.gif" STYLE="float:
left">This is text following the image. It floats on the right.
- Browser Notes
- - Netscape 4 Beta 3 This appears to only
work with in-line and block level elements, but not at all with replaced elements.
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| none |
explicit |
IE | N4B3 |
The element will be displayed in-line where it appears in the text. |
| left |
explicit |
IE | N4B3 |
The element will be positioned using 'margin' properties, and text following the element
will wrap around it on the right side. |
| right |
explicit |
IE | N4B3 |
The element will be positioned using 'margin' properties, and text following the element
will wrap around it on the left side. |
- clear
[IE | N4B2]
- Applicable Tags: ALL
- HTML Equivalent:
<br CLEAR= left|right|all>
- Inherit From Parent: No
- Default Value: none
- What Is It?
- This property specifies whether the current element allows elements to float along
its sides. The values for this property indicate which sides of the element do
not allow floating elements.
- Example
- Ext/Doc: address { clear: both }
- In-Line: <address STYLE="clear:
both">This is a test document</address>
|
Allowed
Values
|
Value
Type
|
Browser
Support
|
Description
|
| none |
explicit |
IE | N4B2 |
Floating elements are allowed on both sides of the current element. |
| left |
explicit |
IE | N4B2 |
The current element will be moved below any floating elements on the left-hand side. |
| right |
explicit |
IE | N4B2 |
The current element will be moved below any floating elements on the right-hand side. |
| both |
explicit |
IE | N4B2 |
The current element will be moved below any floating elements on either side. |
Boring Copyright Stuff....