CSS හි විවිධ පැති සඳහා ආන්තර (margin)

විවිධ පැති සඳහා විවිධ ආන්තර (margins) සැකසීම සඳහා වෙනම ගුණාංග ඇත: margin-left - වම් පැත්ත සඳහා, margin-right - දකුණු පැත්ත සඳහා, margin-top - ඉහළ පැත්ත සඳහා සහ margin-bottom - පහළ පැත්ත සඳහා.

අපි උදාහරණයක් බලමු:

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

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  margin-top:    10px; /* ඉහළින් */
  margin-right:  20px; /* දකුණු පසින් */
  margin-bottom: 30px; /* පහළින් */
  margin-left:   40px; /* වම් පසින් */
  
  height: 100px;
  border: 1px solid green;
}

Результат: