Question

有没有办法设置水平边距并继承垂直边距？除了设置margin-left和margin-right之外的其他方式？我希望像margin: inherit 20px;这样的东西可以工作。

HTML ：

<div class="outer">
    <div class="inner horizontal-margin-working">
        Working but lame
    </div>
    <div class="inner horizontal-margin-notworking">
        Not working
    </div>
</div>

Css ：。。{ 背景：＃27ae60; 填充：10px; }

.inner {
    margin: 10px;
}

.horizontal-margin-working {
    margin-left: 50px;
    margin-right: 50px;
}

.horizontal-margin-notworking {
    margin: inherit 50px;
}

Answer 1

不，使用短手属性时，无法保持垂直边距。那是因为：

在CSS中，当两个或多个选择器适用于元素时，最新选择器（或更具体的选择器）中提供的值将赢得公共属性。在margin，另一个类选择器中同时提供了.inner，因此.inner中的一个将获得覆盖。< / LI>
inherit（以及长度值）似乎对简写margin属性无效，而对于缩写margin-*属性和{inherit属性有效1}}仅在速记中指定。此外，margin: 10px选择器中设置的.inner实际上是相同的元素（而不是父元素），因此inherit无法工作。
auto是margin的有效值，但保持前一个选择器中指定的边距。它告诉UA计算并分配合适的值。对于您的情况，可以将margin-top和margin-bottom设置为10px，但也可能不会（取决于其他因素）。
当为margin属性提供任何长度值（像素或百分比）时，UA决定如何根据no解释给定值。提供的价值。如果提供了一个值，则设置为所有边，2个值表示第一个是垂直的，而第二个是水平边距，依此类推。

因此，简而言之，专门覆盖margin-left和margin-right（例如在.horizontal-margin-working中）是唯一能够 保持的方法垂直边距。

Answer 2

而不是使用margin:inherit 50px;

像这样使用

.horizontal-margin-notworking {
    margin-top: inherit;
    margin-bottom: inherit;
    margin-left: 50px;
    margin-right: 50px;

}

Answer 3

像这样使用

<style>
.outer {
  background: #27ae60;
  padding: 10px;
}

.inner {
  margin: 10px;
}

.horizontal-margin-working {
  margin-left: 50px;
  margin-right: 50px;
}

.horizontal-margin-notworking {

margin-top: inherit;
margin-bottom: inherit;
margin-left: 50px;



}

</style>
<div class="outer">
  <div class="inner horizontal-margin-working">
    Working but lame
  </div>
  <div class="inner horizontal-margin-notworking">
    Not working
  </div>
</div>

设置margin-left和margin-right并保持垂直边距

3 个答案: