Javascript 为什么我的div看起来像是我指定了一厘米半的上/下边距？

我正在开发AngularJS应用程序，遇到了不需要的空白

<div class='user' ng-repeat='session in sessions'>
    <div class='text' ng-bind='monologues[session][0]'></div>
    <div class='timestamp' ng-bind='monologues[session][1] | to_locale'></div>
</div>

我为div.user指定了最小高度（使用jQuery动态计算），而为div.text或div.timestamp指定了高度或边距。Chrome的元素检查器似乎没有为div.text或div.timestamp显示任何类似于边距或最小高度的内容。手动指定div.user的零边距和最小高度：

   <style type="text/css">
        div.user
            {
            overflow-y: auto !important;
            white-space: pre-wrap;
            }
        div.user div
            {
            margin: 0;
            min-height: 0;
            }
        input[type='text']
            {
            width: 100%;
            }
        textarea
            {
            width: 100%;
            height: 150px;
            }
    </style>

分区用户
{
溢出y：自动！重要；
空白：预包装；
}
div.user div
{
保证金：0；
最小高度：0；
}
输入[type='text']
{
宽度：100%；
}
文本区
{
宽度：100%；
高度：150像素；
}

该页面使用H5BP CSS，但对该文件的包含内容进行注释时，不会将两个内部div周围的边距更改为div.user

---

是否还有其他东西会让我产生不必要的空白行为？

您的

空白：预包装是导致问题的原因

看

现在是这样了


我不知道你为什么需要它，但至于你的问题，这就是原因

div.user {
    overflow-y: auto !important;
}

如果您真的想保留它，那么您可以将html放在一行中，如下所示

<div class='user' ng-repeat='session in sessions'><div class='text' ng-bind='monologues[session][0]'>asfafd adsfds</div><div class='timestamp' ng-bind='monologues[session][1] | to_locale'>sdf sdf as</div></div>

asfafd adsfdssdf sdf as

或


为家长定义
font size:0
，为孩子定义
font size
。这不是一种理想的做事方式，因为这样会很快变得一团糟

我认为最好的方法是不要使用预包装
什么元素有不需要的空白
div.user
或
div.text
？div.text和div.timestamp都像它们有不需要的空白一样；用户从那些包含不需要的空格的元素中按预期滚动。但是，我无法通过Chrome的inspector找到空白。您可以在
div.user
上尝试
font-size:0
，看看这是否消除了子项上不需要的空白。浏览器的调试器对这些div有何评论？您是否在没有
空白：预包装的情况下尝试过它？