margin-left, margin-right, margin-top, margin-bottom, margin
Value: [ <length> | <percentage> | auto ]{1,4} (for 'margin' property)
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width
These properties set the margin of an element, while the 'margin' property can be used to set the border for all four sides. The other four properties only set their respective side.
For the 'margin' property, the four lengths apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
For example :
BODY { margin: 1em 2em 3em }
and
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em
}
would produce the same result.
padding-top, padding-right, padding-bottom, padding-left, padding
Value: [ <length> | <percentage> | auto ]{1,4}
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width
These properties describe how much space is inserted between the border and the content of the element. The order is top, right, bottom, left. A single value applies to all sides, while using two or three values set the respective sides, with the missing values being copied from the opposite side.
The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right' 'padding-bottom' and 'padding-left' at the same place in the style sheet.
If four values are specified they apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.
The surface of the padding area is set with the 'background' property.
Note that 'padding' properties cannot be negative values.
border-top-width, border-right-width, border-bottom-width, border-left-width, border-width
Value: [thin | medium | thick | <length>] {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A
The 'border-width' property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width' and 'border-left-width' at the same place in the style sheet.
There can be from one to four values, with the following interpretation:
H1 { border-width: thin }
all 4 'border-*-width' properties are set to 'thin'
H1 { border-width: thin thick }
border-top-width and border-bottom-width are set to 'thin', while border-right-width and border-left-width are set to 'thick'
H1 { border-width: thin thick medium }
border-top-width is set to 'thin', while border-right-width and border-left-width are set to 'thick' and border-bottom-width is set to 'medium'
H1 { border-width: thin thick medium none }
border-top-width is set to 'thin', border-right-width is set to 'thick', border-bottom-width is set to 'medium' and border-left-width is set to 'none'
In the examples below, the comments indicate the resulting widths of the top, right, bottom and left borders:
border-top-color, border-right-color, border-bottom-color, border-left-color, border-color
Value: <color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A
These properties set the border colour properties for all four borders of the element, with border-color being short hand for the other four properties. The reasoning for setting individual border colours is as for border widths, namely that 1 to 4 values can be used in the border-color property, with missing declarations using that declared for the opposite side.
border-top-style, border-right-style, border-bottom-style, border-left-style, border-style
Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A
These properties set the border style properties for all four borders of the element, with border-style being short hand for the other four properties. The reasoning for setting individual border styles is as for border widths, namely that 1 to 4 values can be used in the border-style property, with missing declarations using that declared for the opposite side.
The various styles are as follows:
border-top, border-right, border-bottom, border-left, border
Value: <border-*-width> | <border-*-style> | <border-*-color> | {1,4}
Initial: medium
Applies to: all elements
Inherited: no
Percentage values: N/A
The border properties can be used to globally set the border widths, styles and colours for all four borders of an element. For example, the first rule below is equivalent to the set of four rules shown after it:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.
Since the properties to some extent have overlapping functionality, the order in which the rules are specified becomes important. Consider this example:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
In the above example, the color of the left border will be black, while the other borders are red. This is due to 'border-left' setting the width, style and color. Since the color value is not specified on the 'border-left' property, it will be taken from the 'color' property. The fact that the 'color' property is set after the 'border-left' property is not relevant.
Note that while the 'border-width' property accepts up to four length values, this property only accepts one.
width
Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width
This property can be applied to text elements, but it is most useful with inline images and similar insertions. The width is to be enforced by scaling the image if necessary, preserving the aspect ratio of the image if the 'height' property is 'auto'.
height
Value: <length> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: N/A
As above, this property can be applied to text, but it is most useful with inline images and similar insertions. The height is to be enforced by scaling the image if necessary, preserving the aspect if the 'width' property is 'auto'.
float
Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A
This property is most often used with inline images, to allow floating images (c.f. <IMG ALIGN ...>
clear
Value: none | left | right | both
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A
This property specifies if elements allow floating elements (normally images) to the left or right. With 'clear' set to 'left', an element will be moved below any floating element on the left side. (c.f. <BR CLEAR= ...>
)
© 1995-1998, Stephen Le Hunte
file: /Techref/language/html/ib/Style_Sheets/boxprop.htm, 10KB, , updated: 2004/3/1 16:47, local time: 2024/10/12 03:08,
98.84.18.52:LOG IN ©2024 PLEASE DON'T RIP! THIS SITE CLOSES OCT 28, 2024 SO LONG AND THANKS FOR ALL THE FISH!
|
©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://www.massmind.org/techref/language/html/ib/Style_Sheets/boxprop.htm"> Box properties</A> |
Did you find what you needed? |
Welcome to massmind.org! |
Welcome to www.massmind.org! |
.