/*If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.*/

​

/* so we need a 1px top&bottom padding in parent */

div{

  width: 600px;

  margin: 30px auto;

  line-height: 1.5;

  text-align: left;

  padding: 1px 16px;

  box-sizing: border-box;

}

​

div:nth-child(1){

  border: 1px solid #ccc;

  border-radius: 3px;

  background: white;

}

div:nth-child(2){

  border-right: 6px solid red;

  border-left: 6px solid red;

  background: #ffe7e7;

}

​

div:nth-child(3){

  border-top: 7px solid #ffeb3b;

  border-bottom: 7px solid #ffeb3b;

  background: #ffffd7;

}

​

div:nth-child(4){

  border: 1px solid #4CAF50;

  border-bottom: 7px solid #4CAF50;

  background: #e7ffe7;

}