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

标签 css html layout sass

<分区>

有没有办法设置水平边距并继承垂直边距?除了设置 margin-leftmargin-right 之外还有其他方法吗?我希望像 margin: inherit 20px; 这样的东西能起作用。

在这里查看:https://jsfiddle.net/cm8kwfok/1/

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:.outer { 背景:#27ae60; 填充:10px;

.inner {
    margin: 10px;
}

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

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

最佳答案

不,使用简写属性时无法保持垂直边距。那是因为:

  • 在 CSS 中,当两个或多个选择器适用于一个元素时,最新选择器(或更具体的选择器)中提供的值将优先用于公共(public)属性。在这里,margin.inner 中给出,另一个类选择器在 .inner 中将得到 覆盖
  • inherit(连同长度值)似乎对速记 margin 属性无效,而它对速记 margin-* 有效 属性以及何时在简写中单独指定 inherit。此外, margin: 10px 是在 .inner 选择器中设置的,它实际上是同一个元素(而不是父元素),所以 inherit 不会'不工作。
  • automargin 的有效值,但它不会保持在前一个选择器中指定的边距.它告诉 UA 计算并分配一个合适的值。对于您的情况,它可能会将 margin-topmargin-bottom 设置为 10px 但也可能不会(取决于其他因素)。
  • 当为 margin 属性指定任何长度值(像素或百分比)时,UA 决定如何根据编号解释给定的值。提供的值。如果提供一个值,则该值会设置到所有边,2 个值表示第一个是垂直边距,第二个是水平边距,依此类推。

所以,简而言之,具体地覆盖 margin-leftmargin-right(就像在 .horizo​​ntal-margin-working 中一样)是您可以保持垂直边距的唯一方法。

关于css - 设置 margin-left 和 margin-right 并保持垂直边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37693765/

相关文章:

layout - Excel 宏 - 宏运行时的屏幕

html 布局 : how to float divs vertically

html - 如果内容太长,我的页脚将不会留在底部

javascript - 在 jQuery 中用 sibling 包装 div 的最简单方法是什么?

javascript - 鼠标悬停时不允许更改顶层的子图像

html - 需要将图像放在列表旁边

asp.net - 在左侧 css 中获取显示图像的 css 问题。网站

html - wkhtmltopdf 正文和页脚之间的边距

c# - 使用带有 CefSharp 或 CefGlue 的 JavaScript 的本地或流式音频

java - 如何在 LinearLayout 中显示在其他布局上播放的 TextView?