Vipimo vya Pembeni (Margin) kwa Pande Mbalimbali katika CSS

Ili kuweka vipimo tofauti vya pembeni kwa pande tofauti kuna sifa maalum: margin-left - kwa upande wa kushoto, margin-right - kwa upande wa kulia, margin-top - kwa juu na margin-bottom - kwa chini.

Tuangalie kwa mfano:

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

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  margin-top:    10px; /* juu */
  margin-right:  20px; /* kulia */
  margin-bottom: 30px; /* chini */
  margin-left:   40px; /* kushoto */
  
  height: 100px;
  border: 1px solid green;
}

Результат: