Skip to main content

Getting StartED with CSS

Box Model Properties

These properties control the height and width of elements, as well as the vertical and horizontal space around them. Although the default value for margin-related properties is 0, browsers often add a value of their own. Vertical margins of adjacent elements collapse or overlap, so that only the largest value is applied. Horizontal margins never collapse, nor does vertical or horizontal padding. See Chapter 6 for a detailed description of the CSS box model. Margins are covered in Chapter 3.

height

Accepted values:
A percentage, size using a unit of measurement, or the keyword auto
Default:
auto
Inherited:
No

Specifies the height of an element’s content. Padding and borders are added outside this value, and increase the element’s overall height. The height property cannot be applied to inline text, table columns, or column groups. Although 0 is valid, negative values are not permitted.

margin-right, margin-left, margin-top, margin-bottom

Accepted values:
A percentage, size using a unit of measurement, or the keyword auto
Default:
0
Inherited:
No

Specifies the size of the margin on the selected side. Cannot be used on table cells, rows, or columns. If the element does not have a declared width, auto is treated as 0. A negative value can be used to reduce the margin and move the element closer to its neighbor(s).

margin

Accepted values:
Up to four values, consisting of percentages, sizes with a unit of measurement, or the keyword auto
Default:
0
Inherited:
No

Shorthand property that lets you specify margins for all four sides in a single declaration. Accepts a space-separated list of one, two, three, or four values, which are applied as follows:

Negative values are permitted.

max-height

Accepted values:
A percentage, size with a unit of measurement, or the keyword none
Default:
none
Inherited:
No

Specifies the maximum height of an element. The default value, none, means there is no maximum. Cannot be applied to inline text, table columns, or column groups. Negative values are not permitted. Not supported by IE6.

max-width

Accepted values:
A percentage, size with a unit of measurement, or the keyword none
Default:
none
Inherited:
No

Specifies the maximum width of an element. The default value, none, means there is no maximum. Cannot be applied to inline text, table columns, or column groups. Negative values are not permitted. Not supported by IE6.

min-height

Accepted values:
A percentage, or size with a unit of measurement
Default:
0
Inherited:
No

Specifies the minimum height of an element. Cannot be applied to inline text, table columns, or column groups. Negative values are not permitted. Not supported by IE6.

min-width

Accepted values:
A percentage, or size with a unit of measurement
Default:
0
Inherited:
No

Specifies the minimum width of an element. Cannot be applied to inline text, table columns, or column groups. Negative values are not permitted. Not supported by IE6.

padding-top, padding-right, padding-bottom, padding-left

Accepted values:
A percentage, or size with a unit of measurement
Default:
0
Inherited:
No

Specifies the amount of padding to be added to the content’s width or height on the selected side. Background color and/or image show through padding. Padding can be added to table cells and captions, but not to other table elements. Negative values are not permitted.

padding

Accepted values:
Up to four values, consisting of percentages, or sizes with a unit of measurement
Default:
0
Inherited:
No

Shorthand property that allows you to specify padding for all four sides in a single declaration. Refer to margin for details of how the values are applied.

width

Accepted values:
A percentage, size using a unit of measurement, or the keyword auto
Default:
auto
Inherited:
No

Specifies the width of an element. Padding and borders are added to this value, increasing the element’s overall width. Cannot be applied to inline text, table columns, or column groups. Although 0 is valid, negative values are not permitted.