Working with CSS Margins

Now we will deal with the margin property, which sets the indents between site elements. Let's see how this looks in practice.

To begin with, I will give you two blocks nested inside each other without margin (they will stick together and we will see a double border):

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

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

Результат:

Now let's set margin to 30px on the inner block:

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

Результат: