CSS'te margin Kenar Boşlukları ile Çalışma

Şimdi, web sitesi elemanları arasındaki boşlukları ayarlayan margin özelliğini inceleyeceğiz. Bunun pratikte nasıl göründüğüne bir bakalım.

İlk olarak, size iç içe geçmiş iki bloğu (birbirine yapışacaklar ve çift kenarlık göreceğiz) margin olmadan göstereyim:

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

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

Результат:

Şimdi içteki bloğa margin değerini 30px olarak ayarlayalım:

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;
}

Результат: