如何消除div之间的差距？

Question

div之间存在差距，因为我有以下css规则

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

实际上原因是 box-sizing 属性，问题是如何仅为父div和cos禁用此规则我需要此规则用于所有其他元素？

他是我所有ruls

的屏幕

使用此配置它可以正常工作，但在此之后我遇到了所有其他元素的问题

以下是小提琴https://jsfiddle.net/4j27tsdL/

中的代码

Answer 1

我认为你做得很好。只需要改变财产的价值。试一试。它已经过全面测试。

*, :after, :before {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

Answer 2

你需要覆盖孩子：

.childElements{
  box-sizing: content-box;
}

但是，对于你的问题，只有从父项而不是子元素中删除边框，那么你需要再次使用css，即使你申请了*：另外，请注意以下内容不会起作用你期待这个差距。以上css规则有效。

.parents{
  box-sizing: content-box;
}
.childElements{
  box-sizing: border-box;
}

:)让人困惑的问题令人困惑的答案......

Answer 3

怎么样

.parents-parent > .parent {
  box-sizing: content-box;
}

当你知道父母，因为* > .parent太多了。

Answer 4

假设您的元素被称为.myClass，请将其添加到您的CSS中。

.myClass, .myClass:before, .myClass:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

有关box sizing的更多信息。