JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outside_parent">
    <div class="parent">   
        <div class="daughter">Дочерний</div>   
    </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_parent {
    margin-top:40px;
    margin-left: 40px;
    border:2px dotted black;
    background:rgba(150, 0, 255, 0.7);
}

.parent {
    padding:0px; /* Обратите внимание что внутренние отступы равны 0 */
    border:0px solid grey; /* Полей у родителя так же не должно быть */
    margin-top: 40px; /* Этот отступ схлопнулся с дочерним */
    background:rgba(150, 0, 255, 0.7);
}

.daughter {
    width: 196px;
    margin-top:60px; /* Актуальное значения отступа */
    border:2px solid white;
}