Werken met margin-inspringen in CSS

Nu gaan we het hebben over de eigenschap margin, die de afstand tussen website-elementen instelt. Laten we eens kijken hoe dat er in de praktijk uitziet.

Om te beginnen geef ik je twee blokken in elkaar genest zonder margin (ze zullen aan elkaar plakken en we zullen een dubbele rand zien):

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

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

Результат:

Laten we nu een margin van 30px instellen voor het binnenste blok:

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

Результат: