JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outside">Внешний блок</div>
<div class="parent">   
    <div class="daughter">Дочерний</div>   
</div>

CSS

body {
    text-align:center;
    font-family:sans-serif;
    font-size:12px;
    line-height:1.5;
    color:white;
    padding:0;
    margin:0;
    background: url('http://habrastorage.org/files/97d/5df/2eb/97d5df2ebcf24bf489a37010e8157862.png') repeat -80px -80px;
}

div {
    width:200px;
}

.outside {
    height:16px;
    margin: 20px 0 0 40px;
    border:2px solid white;
    background:rgba(150, 0, 255, 0.7);
    margin-bottom:20px; /* Этот отступ так же схлопнулся с отступами
}

.parent {
    margin-top:40px; /* Этот отступ схлопнулся с дочерним */
    margin-left: 20px; 
} /* Родительский блок не должен иметь ни полей ни границ для срабатывания эффекта */

.daughter {
    margin-left:40px;
    margin-top:60px; /* Актуальный схлопнувшийся отсуп */
    border:2px solid white;
}