当没有“border”属性时，HTML元素显示错误的区域

Question

我有一段代码可以在这里找到：https://jsfiddle.net/JaneChen/vn0n2058/

我的HTML元素显示错误的顶部/底部（当应用背景颜色，框阴影时），其中有一个子元素具有相对位置和margin-top，margin-bottom。

在向父div添加“border：2px red solid”时显示“正确”（预期）区域。在我的jsfiddle代码中，父div是“comment-input-wrapper”。

border: 2px red solid;

是否有解决方案，或者只是一个CSS错误......

HTML

<div class="comment-input-wrapper" >
    <div class="text-input-wrapper">
        abcdefg
    </div>
</div>

CSS

.comment-input-wrapper {
     box-shadow: 0px 1px 4px 0px rgba(181, 181, 181, 1);
    .text-input-wrapper {
         position: relative;
         margin-top: 30px;
         margin-bottom: 27px;
    }
}

图像：

Answer 1

这是利润率下降的奇怪结果之一。 https://css-tricks.com/what-you-should-know-about-collapsing-margins/#article-header-id-1。

摘要：父元素的边距将覆盖子元素的边距，除非它们之间存在可靠的内容。这可能是另一个子元素，或父元素的填充或边框。

这个dosn意味着父元素和子元素之间的东西＆＃39;就像人们可能会想到的那样 - 它意味着父元素边缘与子元素边缘之间的某种东西。如果你深入研究css框模型的概念，那将有助于解释为什么父边界和填充在父元素和子元素的边缘之间。 （开始使用盒子模型的好地方：https://css-tricks.com/the-css-box-model/）

如果你想在没有可见边框的情况下完成此操作，可以使用 父级padding:1px;或border:1px solid transparent;

https://jsfiddle.net/t67359e0/（在示例中使用填充）

无论哪种方式，你的父母将是2px更宽和2px更高，但如果你从你的子元素的每一边的边缘取1px，它将会出现相同的。

最后，您还可以将盒子阴影放在子项上，并使用填充而不是边距。

希望有所帮助 - 快乐编码。

Answer 2

从你的JS小提琴中删除你的空白区域修复了一些： HTML：

<div class="comment-input-wrapper" >
<div class="text-input-wrapper">
abcdefg
</div>
</div>

然后我认为使用填充会产生所需的居中效果： CSS

.comment-input-wrapper {
-webkit-box-shadow: 0px 1px 4px 0px rgba(181, 181, 181, 1);
-moz-box-shadow: 0px 1px 4px 0px rgba(181, 181, 181, 1);
box-shadow: 0px 1px 4px 0px rgba(181, 181, 181, 1);
}

.text-input-wrapper {
position: relative;
padding-top: 30px;
padding-bottom: 27px;
width: auto;
padding-left: 50%;
}

如果我理解你的问题，我认为这会有所帮助。

编辑：继续发表评论

保证金没有任何余地（我认为），因此不会显示。如果你在abcdefg div下面放置一个div，那么它将根据你的需要设置一个很好的间隙。如果没有更多要添加的元素，您可以使用填充来获得所需的效果