空のdivから表示されるインラインブロックマージンを削除する

Question

空のdivとコンテンツを持つdivが3つあります。 何らかの理由で空のdivにmargin: 0;を使って調整できない余白が含まれています。

どうやって写真に表示される空のdivの上下の余白を取得できますか？

.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>

そして、これはページの出力である（それらの間のマージンを持っている3行に注目してください）：

Answer 1

は、コードスニペットの下に与えられたチェック。 divの間のスペースを削除する必要があります。

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

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

Answer 2

ソリューションを自分自身を発見しました。

inline-block divの「見えない」余白を削除するには、親要素のfont-size: 0;を使用します。 here