Register | Log in

Mozilla.com

  1. MDC
  2. Main Page
  3. CSS-2 Quick Reference
  4. Box model
Table of contents
  1. 1. Browsers issues
Redirected from En/CSS-2 Quick Reference:Box model

Box model

Table of contents
  1. 1. Browsers issues

B: IE5 NS4 S: IE55 macIE5 NS6 O5 Gecko

Margin CSS-2.1 Section 8.3

margin-top : length | percentage | auto;
margin-right : length | percentage | auto;
margin-bottom : length | percentage | auto;
margin-left : length | percentage | auto;

  • length : Absolute value.
  • percentage : Value relative to size of containing block.
  • auto : See box model specification for details.
  • Examples
    • margin-top: 1em;

B: IE5 NS4 S: IE55 macIE5 NS6 O5 Gecko

Margin CSS-2.1 Section 8.3

margin : margin-top margin-right margin-bottom margin-left;

  • Tips and Notes
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • margin-top: 1em;
    • margin: 10px;
    • margin: 0px 4px 0px 4px;
    • margin: 0px auto 0px auto;


B: IE5 NS4 S: IE55 macIE5 NS6 O5 Gecko

Padding CSS-2.1 Section 8.4

padding-top : length | percentage;
padding-right : length | percentage;
padding-bottom : length | percentage;
padding-left : length | percentage;

  • length : Absolute value.
  • percentage : Value relative to size of containing block.
  • Examples
    • padding-top: 1em;

B: IE5 NS4 S: IE55 macIE5 NS6 O5 Gecko

Padding CSS-2.1 Section 8.4

padding : padding-top padding-right padding-bottom padding-left;

  • Tips and Notes
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • padding: 10px;
    • padding: 0px 4px 0px 4px;
    • padding: 0px auto 0px auto;


B: NS4P: IE5 S: IE55 macIE5 NS6 O5 Gecko

Border width CSS-2.1 Section 8.5.1

border-top-width : thin | medium | thick | length;
border-right-width : thin | medium | thick | length;
border-bottom-width : thin | medium | thick | length;
border-left-width : thin | medium | thick | length;

  • length : Absolute value.
  • Examples
    • border-top-width: 1px;

B: NS4P: IE5 S: IE55 macIE5 NS6 O5 Gecko

Border width CSS-2.1 Section 8.5.1

border-width : thin | medium | thick | length;

  • Tips and Notes
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • border-width: 1px;
    • border-width: 1px 2px 1px 2px;


B: NS4P: IE5 S: IE55 macIE5 NS6 O5 Gecko

Border color CSS-2.1 Section 8.5.2

border-top-color : color | transparent;
border-right-color : color | transparent;
border-bottom-color : color | transparent;
border-left-color : color | transparent;

  • color : Color name or RGB value.
  • Examples
    • border-top-color: red;
    • border-bottom-color: #00ff00;

B: NS4P: IE5 S: IE55 macIE5 NS6 O5 Gecko

Border color CSS-2.1 Section 8.5.2

border-color : border-top-color border-right-color border-bottom-color border-left-color;

  • Tips and Notes
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • border-color: red;
    • border-color: #336699;
    • border-color: green white red #0000ff;


B: NS4P: IE5 S: IE55 macIE5 NS6 O5 Gecko

Border style CSS-2.1 Section 8.5.3

border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;

  • Examples
    • border-top-style: red;
    • border-bottom-style: #00ff00;

B: NS4P: IE5 S: IE55 macIE5 NS6 O5 Gecko

Border style CSS-2.1 Section 8.5.3

border-style : border-top-style border-right-style border-bottom-style border-left-style;

  • Tips and Notes
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • border-style: solid;
    • border-style: solid dotted;


P: IE5 S: IE55 macIE5 NS6 O5 Gecko

Border CSS-2.1 Section 8.5.4

border-top : border-width border-style border-color;
border-right : border-width border-style border-color;
border-bottom : border-width border-style border-color;
border-left : border-width border-style border-color;
border : border-width border-style border-color;

  • border-width : Single width value, see above.
  • border-style : Single style value, see above.
  • border-color : Single color value, see above.
  • Examples
    • border-top: 1px solid black;
    • border: 3px double #33ff33;

Browsers issues

Margin

  • IE5 : Does not work with in-line elements.
  • NS4 : Does not work with in-line elements and images.

Padding

  • IE5 : Does not work with in-line elements and has strange behaviour on tables.
  • NS4 : Strange rendering results (overlapping).

Border width

  • IE5 : Does not work with in-line elements and has strange behaviour with checkbox and radio buttons.
  • NS4 : In-line elements are transformed into box elements. Has no effect on tables. Default width is zero, not medium. Anchors become unusable. Other strange issues.

Border style

  • IE5 : Does not work with in-line elements. Dotted and dashed styles not properly supported.
  • NS4 : In-line elements are transformed into box elements. Has no effect on tables. Default style is solid, not none. Anchors become unusable. Other strange issues.

Border color

  • IE5 : Does not work with in-line elements.
  • NS4 : In-line elements are transformed into box elements. Has no effect on tables. Anchors become unusable. Other strange issues.

Border shorthand

  • IE5 : Does not work with in-line elements and has strange behaviour with checkbox and radio buttons.

Page last modified 12:44, 10 Aug 2005 by Nickolay

Tags:

Files (0)