Boş satırlardan görünen satır içi kenar boşluğunu kaldırma

Question

Üç boş div ve içerikli bir div var. Bazı nedenlerle boş div'ler, margin: 0; kullanarak ayarlayamadığım bir kenar boşluğu içeriyor.

Resimde görüntülenen boş divlerin üst ve alt kenar boşluklarını nasıl elde ederim?

.widget-user-p{ 
 
    text-align: center; 
 
    vertical-align: top; 
 
    width: 100%; 
 
    max-width: 255px; 
 
    min-height: 320px; 
 
    margin: 10px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    border: 1px solid #F4F4F4; 
 
    border-bottom: 3px solid #CACACA; 
 
    transition-duration: 0.3s; 
 
} 
 
.widget-user-empty{ 
 
    min-height: 1px; 
 
    border: none; 
 
    margin: 0; 
 
    background-color: #aeaeae; 
 
}

<div class="widget-user-p"></div> 
 
<div class="widget-user-p widget-user-empty"></div> 
 
<div class="widget-user-p widget-user-empty"></div> 
 
<div class="widget-user-p widget-user-empty"></div>

Ayrıca bu sayfadan çıkışı

(üç çizgi fark aralarında bir marj var):

Answer 1

onay kod parçacığı aşağıda verilmiştir. div arasındaki boşluğu kaldırmalısın.

Answer 2

*{margin:0;padding:0;} 
 
div{display:inline-block}

<div></div><!-- 
 
--><div></div><!-- 
 
--><div>dasdas</div>

çözeltisini kendim buldum.

inline-block div'lerinin "görünmez" kenar boşluğunu kaldırmak, üst öğede font-size: 0; kullanarak yapılabilir. here