CSS margin property

HTML
<div class="first"> First box </div> <hr /> <div class="second"> Second Box </div> <hr /> <div class="third"> Third Box </div> <hr />
CSS
.first { margin:20px 10px 30px 5px; /* top rightside bottom leftside*/ border:1px solid blue; } .second { margin: 20px 10px; /* topbottom leftright */ border:1px solid blue; } .third { margin: 50px; /* all sides */ border:1px solid blue; }
Javascript
A border has been applied to the example DIVs to illustrate where the block is. Notice how the margin is applied to the outside of the DIV. To add padding to the inside of a DIV, use the "padding" CSS property. The margin property may be specified using one, two, three, or four values. Each value is a <length>, a <percentage>, or the keyword auto. One value applies to all four sides. Two values apply first to top and bottom, the second one to left and right. Three values apply first to top, second to left and right and third to bottom. Four values apply to top, right, bottom and left in that order (clockwise). Values <length> Specifies a fixed width. Negative Values are allowed. See for <length> possible units. <percentage> A <percentage> relative to the width of the containing block. Negative values are allowed. auto auto is replaced by some suitable value, e.g. it can be used for centering of blocks. div { width:50%; margin:0 auto; } centers the div container horizontally.