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):
<div id="parent">
<div id="child"></div>
</div>
#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:
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 300px;
border: 1px solid red;
}
#child {
height: 100px;
border: 1px solid green;
margin: 30px;
}
:
