Marginaalit eri sivuille CSS:ssä

Eri sivujen marginaalien asettamiseen on olemassa erilliset ominaisuudet: margin-left - vasemmalle puolelle, margin-right - oikealle puolelle, margin-top - yläpuolelle ja margin-bottom - alapuolelle.

Katsotaanpa esimerkkiä:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  margin-top:    10px; /* ylhäältä */
  margin-right:  20px; /* oikealta */
  margin-bottom: 30px; /* alhaalta */
  margin-left:   40px; /* vasemmalta */
  
  height: 100px;
  border: 1px solid green;
}

Результат: