CSS හි margin කඩඉරි සමඟ වැඩ කිරීම

දැන් අපි වෙබ් අඩවියේ මූලද්‍රව්‍ය අතර කඩඉරි සකසන margin ගුණාංගය පිළිබඳව විමසා බලමු. ප්‍රායෝගිකව එය කෙසේ පෙනේදැයි බලමු.

මුලින්ම, මම ඔබට margin නොමැතිව එකිනෙක තුළ තබා ඇති බ්ලොක් දෙකක් ඉදිරිපත් කරමි (ඒවා එකට ඇලෙන අතර අපට ද්විත්ව සීමාවක් දකිනු ඇත):

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

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  height: 100px;
  border: 1px solid green;
}

Результат:

දැන් අපි අභ්‍යන්තර බ්ලොකයට margin 30px කින් සකසමු:

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

css#parent {
  width: 300px;
  border: 1px solid red;
}

#child {
  height: 100px;
  border: 1px solid green;
  margin: 30px;
}

Результат: