Why is -webkit-margin-before (and after, start, en

问题:

I have:

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;
}

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)

How should I override them?

回答1:

I solved it.

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

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