Every CSS Developer must know about the CSS Padding and Margins.
CSS Margin: Definition
Margin is the space before and after the boundaries (limits) of an element.
For understanding margins, lets take two div elements, one within the other.
HTML
<div class="outer-div">
<div class="margin-el">
This is div element without any margin
</div>
</div>
Now, lets give the background and border property to outer div, and background to inner div with class margin-el
CSS
.outer-div {
border:1px solid blue;
background-color:yellow;
display:inline-block
}
.margin-el {
background:red;
display:inline-block
}
Notice we didn’t give any border to inner div. This is how it looks without any margin.
Notice that, it appears as if inner div has border defined. But its the border from outer element, and as we didn’t define any margin, its starting without any space before the element.
Add the following css to give margin to inner div.
.margin-el {
margin:10px;
}
This is how the page looks like after adding the margin
Instead of giving margin to inner div, we could have defined padding for outer div element to achieve same results.
Like padding, margin can also be defined in all four directions (top, right, bottom, left)
For an element, border comes in between the margin and padding
Try yourself and practice to understand it better.
Some elements have default padding and margins.
It’s good idea to reset the default padding and margins before starting to design your page.
You can reset using following css
* { padding:0; margin:0; }