margin

value: <margin-width>{1,4} | inherit
initial value: depends on User Agent
inherited: no
percentages: a percentage of the width of the containing block
applicable to: all elements (except some table elements)

The margin property determines the space between the outside edges of the box of each element. User agents, browsers, have a pre-set margin for each element. If you wish to change this, you must set a new margin for each element.

The margin property is shorthand for:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

The values given for the margin of an element can be one, two, three or four numbers or percentages. If one value is stated, this value is applied to all four sides of the element, top, right, bottom and left. If two values are stated then the first value is applied to the top and bottom margin. The second value is applied to the left and right sides of the element. If four values are stated, these numbers are applied to the element in the order of top, right, bottom then left side of the element.

Example:

img.marginexample {float: left; background: #ccc; padding: 8px; margin: 15px;}

Lorem ipsum dolor sit amet, nostrum adipisci cum eu. Facer efficiantur cu eum. Sit gubergren euripidis at, mea ea illum pericula temporibus. Ocurreret assentior ei nam, in mea odio pericula incorrupte, in cum commodo maiorum. Nec illum decore in.yellowiris Usu ut euismod albucius facilisis. Pri te animal percipit scribentur. His decore prompta singulis ut, pri cu nisl adolescens, nec ei sumo salutandi constituam. Salutatus gloriatur eam te. Ne vis putant timeam. Tempor euripidis ex his, ex labores fastidii comprehensam has, usu enim posse iisque ea. Ea fuisset volutpat sea, usu nominati qualisque philosophia ad, et erant laboramus intellegat eam. Mel ipsum definitionem in, vix ne ludus probatus, vitae definitionem est ne. Cum te nonumy possit vivendo. Case scripserit quo ea, vis alii nulla explicari id, omnes propriae recteque usu ea. Ei quo lobortis qualisque, cum at novum putent, pro no laudem scribentur. Lorem ipsum dolor sit amet, nostrum adipisci cum eu. Facer efficiantur cu eum. Sit gubergren euripidis at, mea ea illum pericula temporibus. Ocurreret assentior ei nam, in mea odio pericula incorrupte, in cum commodo maiorum. Nec illum decore in.

Notice how in this example, the padding for the <img> element takes on the background color assigned, but the margin does not. The padding adds to the overall size of the box around the element, but the margin simply put space between the <img> element and the text of the <p> element. Without this margin, the text would butt right up to the edge of the padding around the image.