Question: I gave margin 20px for both the div inside sidebar div. But for some reason the gap between two div's us just 20px, which should be 40px. 20px from box1 and 20px from box2. Am I missing some minor thing. please point it out.

**Fiddle:**

<http://jsfiddle.net/3UJWf/>

**HTML:**

```
<div class="sidebar">
     <div class="box1 common">
         <p>Text is here</p>
     </div>
     <div class="box2 common">
         <p>Text is here</p>
     </div>
</div>

```

**CSS:**

```
*
{
    padding:0px;
    margin:0px;
}
.box1 {
    background:red;       
    padding: 40px;
    width: 300px;
}
.box2 {
    background: green;       
    padding: 40px;
    width: 300px;
}
.common {
    margin: 20px;
}

```

Answer: 
This is in the CSS 2.1 specification

> 
> "In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin."
> 
> 
> 

[Source](http://www.w3.org/TR/CSS21/box.html#collapsing-margins)

The best solution is to stick a [clearfix](https://stackoverflow.com/a/1633170/1355856) between the two divs.
try using `.common{ display: inline-block }` and give the sidebar a width.
solves the problem for me