Box properties

 

There are 32 box properties that control the formatting of the box associated with block and replaceable elements

Property Valid Values Sample Usage Applies to Inherited?
margin-top length | percentage | auto { margin-top:5px; } block-level and replaced elements no
margin-right length | percentage | auto { margin-right:5px; } block-level and replaced elements no
margin-bottom length | percentage | auto { margin-bottom:1em; } block-level and replaced elements no
margin-left length | percentage | auto { margin-left:5pt; } block-level and replaced elements no
margin length | percentage | auto {1,4} { margin: 10px 5px 10px 5px; } block-level and replaced elements no
padding-top length | percentage { padding-top:10%; } block-level and replaced elements no
padding-right length | percentage { padding-right:15px; } block-level and replaced elements no
padding-bottom length | percentage { padding-bottom:1.2em; } block-level and replaced elements no
padding-left length | percentage { padding-left:10pt; } block-level and replaced elements no
padding length | percentage {1,4} { padding: 10px 10px 10px 15px; } block-level and replaced elements no
border-top-width thin | medium | thick | length { border-top-width:thin; } block-level and replaced elements no
border-right-width thin | medium | thick | length { border-right-width:medium; } block-level and replaced elements no
border-bottom-width thin | medium | thick | length { border-bottom-width:thick; } block-level and replaced elements no
border-left-width thin | medium | thick | length { border-left-width:15px; } block-level and replaced elements no
border-width thin | medium | thick | length {1,4} { border-width: 3px 5px 3px 5px; } block-level and replaced elements no
border-top-color color { border-top-color:navajowhite; } block-level and replaced elements no
border-right-color color { border-right-color:whitesmoke; } block-level and replaced elements no
border-bottom-color color { border-bottom-color:black; } block-level and replaced elements no
border-left-color color { border-left-color:#C0C0C0; } block-level and replaced elements no
border-color color {1,4} { border-color: green red white blue; } block-level and replaced elements no
border-top-style none | solid | double | groove | ridge | inset | outset { border-top-style:solid; } block-level and replaced elements no
border-right-style none | solid | double | groove | ridge | inset | outset { border-right-style:double; } block-level and replaced elements no
border-bottom-style none | solid | double | groove | ridge | inset | outset { border-bottom-style:groove; } block-level and replaced elements no
border-left-style none | solid | double | groove | ridge | inset | outset { border-left-style:none; } block-level and replaced elements no
border-style none | solid | double | groove | ridge | inset | outset { border-style:ridge; } block-level and replaced elements no
border-top border-width | border-style | border-color { border-top: medium outset red; } block-level and replaced elements no
border-right border-width | border-style | border-color { border-right: thick inset maroon; } block-level and replaced elements no
border-bottom border-width | border-style | border-color { border-bottom: 10px ridge gray; } block-level and replaced elements no
border-left border-width | border-style | border-color { border-left: 1px groove red; } block-level and replaced elements no
border border-width | border-style | border-color { border: thin solid blue; } block-level and replaced elements no
float none | left | right { float:none; } DIV, SPAN, and replaced elements no
clear none | left | right | both { clear:left; } all elements no

 

 

 

 

 

Registration


A password will be e-mailed to you.

Feedback Form

Name (required)

Email (required)

Feedback