Marginesy dla różnych stron w CSS

Aby ustawić różne marginesy dla różnych stron, istnieją osobne właściwości: margin-left - dla lewej strony, margin-right - dla prawej, margin-top - dla górnej i margin-bottom - dla dolnej.

Spójrzmy na przykład:

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

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  margin-top:    10px; /* u góry */
  margin-right:  20px; /* po prawej */
  margin-bottom: 30px; /* u dołu */
  margin-left:   40px; /* po lewej */
  
  height: 100px;
  border: 1px solid green;
}

Результат: