Question

Please see the following picture:

Why is padding-top and margin-top fully opaque, but padding-right etc. not?

Answer 1

I believe they are semi-transparent because they’re not explicitly defined.

Consired following sheet:

selector1 {
    margin: 20px;
}

selector2 {
    margin: 20px;
    margin-top: 10px;
}

selector3 {
    margin: 10px 20px 30px;
}

In first example (selector1) all margin-* properties will be semi-transparent because non is explicitly defined – shortcut is being used.

In second example (selector2) only margin-top will be fully opaque, as it’s defined in its own property.

In last example (selector3), margin-top and margin-bottom are defined explicitly, therefore the will be fully opaque. However margin-left and margin-right are defined by a single value, so they will be semi-transparent.

---

Semi-transparent color is also applied to default values, for instance:

background: red url(...) no-repeat;

This property defined background-color, background-image and background-repeat explicitly, however background-position, background-clip, background-size etc. are not defined (default values are used) so they will be seen as semi-transparent.