CSS margin area of a box

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;

<div class="outer">
  <div class="box1">div1</div>
  <div class="box2">div2</div>
margin refresh



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments