CSS margin property specify the width of the margin area of a box.
CSS property margin
| CSS version: | CSS 2.1 |
| Value: | margin-width{1,4} |
| Initial: | 0 for individual properties |
| Applies to: | all elements except elements with table display types other than table-caption, table and inline-table |
| Inherited: | no |
| Percentage: | refer to width of containing block |
margin values
margin property can be used to specify margin-top, margin-right, margin-bottom, and margin-left (in this order). If less than 4 values are specified, these rules apply.
body { margin: 2px } /* all margins set to 2px */
body { margin: 1px 2px } /* top and bottom = 1px, right and left = 2px */
body { margin: 1px 2px 3px } /* top=1px, right=2px, bottom=3px, left=2px */
margin example
In the following code, CSS property margin can be changed to the following values
- 5px
- 10px
<style type="text/css">
.box1 {
width: 50px; height: 50px; background-color:lightgreen;
margin: 5px;
}
.box2 {
width: 50px; height: 50px; background-color:lightgreen;
}
</style>
<div class="outer">
<div class="box1">div1</div>
<div class="box2">div2</div>
</div>margin refresh
Related
- CSS box-sizing - impact on padding and border
- CSS - margin collapsing
- CSS border - define border properties of an element
- CSS padding inside a box
