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:
- One value: Applies equally to all four sides.
- Two values: The first one applies to the top and bottom, and the second one to the left and right.
- Three values: The first one applies to the top, the second one to the left and right, and the third one to the bottom.
- Four values: The values are applied in clockwise order starting from the top.
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.