删除空 div 中出现的 inline-block 边距

Question

我有三个空的 div 和一个有内容的 div。由于某种原因，空 divs 包含一个我无法使用 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>

这是页面输出（注意三行之间有边距）：

Answer 1

检查下面给出的代码片段。你必须删除 div 之间的 space。

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

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

Answer 2

自己找到了解决方案。

可以在父元素上使用 font-size: 0; 来删除 inline-block div 的 "invisible" 边距。

如所见here

删除空 div 中出现的 inline-block 边距

Removing the inline-block margin that appears from empty divs

html

css

margin