为什么-webkit-margin-before(以及之后、开始、结束)没有被我的显式边距和填充规则覆盖?

2022-01-19 00:00:00 web frontend html css

我有:

html body nav figure {   /* just to clear specificity doubts  */
    margin: 0;
    padding: 0;
    bottom: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: yellow;
}

我在 chrome 中检查元素，并应用我的规则，但也应用了用户代理样式表中的以下内容:

I inspect element in chrome, and my rules are applied, but also the following from the user agent stylesheet:

figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

我认为这些应该被覆盖......我的规则也没有被覆盖(没有被划掉)

I thought these should be overridden... my rules are not overridden either (not crossed out)

我应该如何覆盖它们?

推荐答案

我解决了.

应用用户指定的规则，webkit 会根据它呈现边距，以某种方式覆盖"默认的 -webkit 规则.

The rule specified by the user gets applied, and webkit renders margin according to it, "overriding" the default -webkit ones in some way.

我看到的空间是来自未显示为块的 img，请参阅 this 了解更多.

The space that I was seeing was from the img not being displayed as block, see this for more about it.

相关文章