Box properties
Box properties
The box properties set the size, circumference and position of the boxes
that represent elements
The margin properties set the margin of an element. The 'margin' property
sets the margin for all four sides while the other margin properties only set
their respective side.
The padding properties describe how much space to insert between the border
and the content (e.g., text or image). The 'padding' property sets the padding
for all four sides while the other padding properties only set their respective
side.
The border properties set the borders of an element. Each element has four
borders, one on each side, that are defined by their width, color and style.
The 'width' and 'height' properties set the size of the box, and the
'float' and 'clear' properties can alter the position of elements.
'margin-top'
Value: <length> | <percentage> | auto Initial:
0 Applies to: all elements Inherited: no Percentage
values: refer to width of the closest block-level ancestor
This property sets the top margin of an element:
H1 { margin-top: 2em }
A negative value is allowed, but there may be implementation-specific
limits.
'margin-right'
Value: <length> | <percentage> | auto Initial:
0 Applies to: all elements Inherited: no Percentage
values: refer to width of closest block-level ancestor
This property sets the right margin of an element:
H1 { margin-right: 12.3%
}
A negative value is allowed, but there may be implementation-specific
limits.
'margin-bottom'
Value: <length> | <percentage> | auto Initial:
0 Applies to: all elements Inherited: no Percentage
values: refer to width of closest block-level ancestor
This property sets the bottom margin of an element:
H1 { margin-bottom: 3px
}
A negative value is allowed, but there may be implementation-specific
limits.
'margin-left'
Value: <length> | <percentage> | auto Initial:
0 Applies to: all elements Inherited: no Percentage
values: refer to width of closest block-level ancestor
This property sets the left margin of an element:
H1 { margin-left: 2em }
A negative value is allowed, but there may be implementation-specific
limits.
'margin'
Value: [ <length> | <percentage> | auto ]{1,4}
Initial: not defined for shorthand properties Applies to:
all elements Inherited: no Percentage values: refer to width
of closest block-level ancestor
The 'margin' property is a shorthand property for setting 'margin-top',
'margin-right', 'margin-bottom' and 'margin-left' at the same place in the style
sheet.
If four length 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.
BODY { margin: 2em } /* all margins set to 2em
*/
BODY { margin: 1em 2em } /* top & bottom =
1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em,
right=2em, bottom=3em, left=2em */
'padding-top'
Value: <length> | <percentage> Initial:
0 Applies to: all elements Inherited: no Percentage
values: refer to width of closest block-level ancestor
This property sets the top padding of an element.
BLOCKQUOTE { padding-top: 0.3em
}
Padding values cannot be negative.
'padding-right'
Value: <length> | <percentage> Initial:
0 Applies to: all elements Inherited: no Percentage
values: refer to width of closest block-level ancestor
This property sets the right padding of an element.
BLOCKQUOTE { padding-right: 10px
}
Padding values cannot be negative.
'padding-bottom'
Value: <length> | <percentage> Initial:
0 Applies to: all elements Inherited: no Percentage
values: refer to width of closest block-level ancestor
This property sets the bottom padding of an element.
BLOCKQUOTE { padding-bottom: 2em
}
Padding values cannot be negative.
'padding-left'
Value: <length> | <percentage> Initial:
0 Applies to: all elements Inherited: no Percentage
values: refer to width of closest block-level ancestor
This property sets the left padding of an element.
BLOCKQUOTE { padding-left: 20%
}
Padding values cannot be negative.
'padding'
Value: [ <length> | <percentage> ]{1,4}
Initial: not defined for shorthand properties Applies to:
all elements Inherited: no Percentage values: refer to width
of closest block-level ancestor
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:
H1 {
background: white;
padding: 1em 2em;
}
The example above sets a '1em' padding vertically ('padding-top' and
'padding-bottom') and a '2em' padding horizontally ('padding-right' and
'padding-left'). The 'em' unit is relative to the element's font size: '1em' is
equal to the size of the font in use.
Padding values cannot be negative.
'border-top-width'
Value: thin | medium | thick | <length>
Initial:
'medium'
Applies to: all elements
Inherited:
no
Percentage values: N/A
This property sets the width of an element's top border. The width of the
keyword values are UA dependent, but the following holds: 'thin' <= 'medium'
<= 'thick'.
The keyword widths are constant throughout a document:
H1 { border: solid thick red
}
P { border: solid thick blue
}
In the example above, 'H1' and 'P' elements will have the same border width
regardless of font size. To achieve relative widths, the 'em' unit can be used:
H1 { border: solid 0.5em
}
Border widths cannot be negative.
5.5.12 'border-right-width'
Value: thin | medium | thick | <length>
Initial:
'medium'
Applies to: all elements
Inherited:
no
Percentage values: N/A
This property sets the width of an element's right border. Otherwise it is
equivalent to the 'border-top-width'.
'border-bottom-width'
Value: thin | medium | thick | <length>
Initial:
'medium'
Applies to: all elements
Inherited:
no
Percentage values: N/A
This property sets the width of an element's bottom border. Otherwise it is
equivalent to the 'border-top-width'.
'border-left-width'
Value: thin | medium | thick | <length>
Initial:
'medium'
Applies to: all elements
Inherited:
no
Percentage values: N/A
This property sets the width of an element's left border. Otherwise it is
equivalent to the 'border-top-width'.
'border-width'
Value: [thin | medium | thick |
<length>]{1,4}
Initial: not defined for shorthand
properties
Applies to: all elements
Inherited:
no
Percentage values: N/A
This property is a shorthand property for setting 'border-width-top',
'border-width-right', 'border-width-bottom' and 'border-width-left' at the same
place in the style sheet.
There can be from one to four values, with the following interpretation:
- one value: all four border widths are set to that value
- two values: top and bottom border widths are set to the first value, right
and left are set to the second
- three values: top is set to the first, right and left are set to the second,
bottom is set to the third
- four values: top, right, bottom and left, respectively
In the
examples below, the comments indicate the resulting widths of the top, right,
bottom and left borders:
H1 { border-width: thin } /*
thin thin thin thin */
H1 { border-width: thin thick } /*
thin thick thin thick */
H1 { border-width: thin thick medium } /*
thin thick medium thin */
H1 { border-width: thin thick medium thin } /*
thin thick medium thin */
Border widths cannot be negative.
'border-color'
Value: <color>{1,4}
Initial: the value of the
'color' property
Applies to: all elements
Inherited:
no
Percentage values: N/A
The 'border-color' property sets the color of the four borders.
'border-color' can have from one to four values, and the values are set on the
different sides as for 'border-width' above.
If no color value is specified, the value of the 'color' property of the
element itself will take its place:
P {
color: black;
background: white;
border: solid;
}
In the above example, the border will be a solid black line.
'border-style'
Value: none | dotted | dashed | solid | double | groove | ridge |
inset | outset
Initial: none
Applies to: all
elements
Inherited: no
Percentage values: N/A
The 'border-style' property sets the style of the four borders. It can have
from one to four values, and the values are set on the different sides as for
'border-width' above.
#xy34 { border-style: solid dotted
}
In the above example, the horizontal borders will be 'solid' and the
vertical borders will be 'dotted'.
Since the initial value of the border styles is 'none', no borders will be
visible unless the border style is set.
The border styles mean:
none
no border is
drawn (regardless of the 'border-width' value)
dotted
the border is a
dotted line drawn on top of the background of the element
dashed
the border is a
dashed line drawn on top of the background of the element
solid
the border is a
solid line
double
the border is a
double line drawn on top of the background of the element. The sum of the two
single lines and the space between equals the <border-width> value.
groove
a 3D groove is
drawn in colors based on the <color> value.
ridge
a 3D ridge is
drawn in colors based on the <color> value.
inset
a 3D inset is
drawn in colors based on the <color> value.
outset
a 3D outset is
drawn in colors based on the <color> value.
CSS1 core: UAs may interpret all of 'dotted', 'dashed', 'double',
'groove', 'ridge', 'inset' and 'outset' as 'solid'.
'border-top'
Value: <border-top-width> || <border-style> ||
<color>
Initial: not defined for shorthand
properties
Applies to: all elements
Inherited:
no
Percentage values: N/A
This is a shorthand property for setting the width, style and color of an
element's top border.
H1 { border-bottom: thick solid red
}
The above rule will set the width, style and color of the border below the
H1 element. Omitted values will be set to their initial values:
H1 { border-bottom: thick solid
}
Since the color value is omitted in the example above, the border color
will be the same as the 'color' value of the element itself.
Note that while the 'border-style' property accepts up to four values, this
property only accepts one style value.
'border-right'
Value: <border-right-width> || <border-style> ||
<color>
Initial: not defined for shorthand
properties
Applies to: all elements
Inherited:
no
Percentage values: N/A
This is a shorthand property for setting the width, style and color of an
element's right border. Otherwise it is equivalent to the 'border-top'.
'border-bottom'
Value: <border-bottom-width> || <border-style> ||
<color>
Initial: not defined for shorthand
properties
Applies to: all elements
Inherited:
no
Percentage values: N/A
This is a shorthand property for setting the width, style and color of an
element's bottom border. Otherwise it is equivalent to the 'border-top'.
'border-left'
Value: <border-left-width> || <border-style> ||
<color>
Initial: not defined for shorthand
properties
Applies to: all elements
Inherited:
no
Percentage values: N/A
This is a shorthand property for setting the width, style and color of an
element's left border. Otherwise it is equivalent to the 'border-top'.
'border'
Value: <border-width> || <border-style> || <color>
Initial: not defined for shorthand properties
Applies to:
all elements
Inherited: no
Percentage values: N/A
The 'border' property is a shorthand property for setting the same width,
color and style on 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: block-level and replaced
elements Inherited: no Percentage values: refer to parent
element's width
This property can be applied to text elements, but it is most useful with
replaced elements such as images. The width is to be enforced by scaling the
image if necessary. When scaling, the aspect ratio of the image is preserved 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
This property can be applied to text, but it is most useful with replaced
elements such as images. The height is to be enforced by scaling the image if
necessary. When scaling, the aspect ratio of the image is preserved if the
'width' property is 'auto'.
'float'
Value: left | right | none
Initial: none
Applies
to: all elements
Inherited: no
Percentage values:
N/A
With the value 'none', the element will be displayed where it appears in
the text. With a value of 'left' ('right') the element will be moved to the left
(right) and the text will wrap on the right (left) side of the element. With a
value of 'left' or 'right', the element is treated as block-level (i.e. the
'display' property is ignored).
IMG.icon {
float: left;
margin-left: 0;
}
The above example will place all IMG elements with 'CLASS=icon' along the
left side of the parent element.
This property is most often used with inline images, but also applies to
text elements.
clear'
Value: none | left | right | both
Initial:
none
Applies to: all elements
Inherited: no
Percentage
values: N/A
This property specifies if an element allows floating elements on its
sides. More specifically, the value of this property lists the sides where
floating elements are not accepted. With 'clear' set to 'left', an element will
be moved below any floating element on the left side. With 'clear' set to
'none', floating elements are allowed on all sides
|
