Erinevate külgede marginaalid CSS-is

Erinevate külgede jaoks erinevate marginaalide määramiseks on olemas eraldi omadused: margin-left - vasaku külje jaoks, margin-right - parema külje jaoks, margin-top - ülemise külje jaoks ja margin-bottom - alumise külje jaoks.

Vaatame näidet:

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

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  margin-top:    10px; /* ülevalt */
  margin-right:  20px; /* paremal */
  margin-bottom: 30px; /* alt */
  margin-left:   40px; /* vasakul */
  
  height: 100px;
  border: 1px solid green;
}

Результат: