JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont-1">
    <div class="cont-2">
        <a class="cont-3">
        	With a nested inline-block element. Margins add-up.
        </a>    
    </div>
</div>

<div class="cont-1">
    <div class="cont-2">
        <a class="cont-3-b">
        	With a nested block element. Margins collapse.
        </a>    
    </div>
</div>

CSS

.cont-1 {
	padding: 20px 20px 1px; 
	background: #999;	
	margin-bottom: 20px;	
}

.cont-2 {
	margin-bottom: 20px; 
	background: #CCC;
}

.cont-3 {
	margin-bottom: 20px; 
	display:inline-block; 
	background: #EEE;
}

.cont-3-b {
	margin-bottom: 20px; 
	background: #EEE;
}