CSS: Where have the margins and paddings it's background-color from?

Question

I have seen this coding in a video-workshop. It shall help to see the different boxes within a HTML-layout.

header,
main,
nav,
article,
aside,
footer {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0.5em;
  margin-bottom: 0.5em;
}

* {
  box-sizing: border-box;
}

body {
  background-color: green;
  color: white;
}

The HTML:

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Titel der Seite</title>

  <link rel="stylesheet" href="#">
  <link rel="stylesheet" href="#">
</head>

<body>

  <header>
    <a href="#">
        Logo – Beschreibung
    </a>

    <nav>
      Navigation
    </nav>
  </header>

  <main>
    <article>
      <h1>Hauptinhalt</h1>
      <p>Text</p>
    </article>

    <aside>
      Seitenleiste
    </aside>
  </main>

  <footer>
    <nav>
      Navigation
    </nav>

    <nav>
      Navigation
    </nav>
  </footer>

</body>

</html>

It works. Please see here!

What drives me nuts currently: Where is this in-between dark-green specified, which the margins and paddings around the boxes have?

In CSS you have only two background-color definitions.

The `0.2` in `background-color: rgba(0, 0, 0, 0.2);` gives the opacity, which creates the "in-between dark-green", together with the padding. — Condor, Sep 18 '19 at 14:16
This looks like some inheritance of the `0.2` which is multiplying. A demo of the issue is required. — Paulie_D, Sep 18 '19 at 14:21
you have article inside main and both have opacity, same thing for nav inside header and nav inside footer — Temani Afif, Sep 18 '19 at 14:31
explanation here: https://stackoverflow.com/q/50574524/8620333 — Temani Afif, Sep 18 '19 at 14:32
@TemaniAfif Thanks. If you like: Turn you comment to an answer. I will accept it. — cluster1, Sep 18 '19 at 14:34
Overlapping transparency will blend to create the new green color. Best to assign the background-color to fewer elements at the same time and make sure you are not overlapping more instances of the color than you want. — BugsArePeopleToo, Sep 18 '19 at 14:43

Travis Acton · Accepted Answer · 2019-09-18T14:59:13.137

It is being defined in the css here:

header,main,nav,article,aside,footer {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0.5em;
  margin-bottom: 0.5em;
}

For example with the structure with the nav being encolsed in the header:

<header>
<a href="#">
    Logo – Beschreibung
</a>

<nav>
  Navigation
</nav>
</header>

Your header and your nav are inheriting from the same css class which background color has an opacity setting: background-color: rgba(0, 0, 0, 0.2);

Html elements do not get laid inset, they are stacked on top of each other.

As the items are stacked and inherit, it gives the item darker shades as opacity as they stacked on each other.

Don't think of the elements on the page as some flat structure. An abstract example would be to think would be:

Say you have a piece of paper on a desk with some writing on it. You also have two pieces of glass that are tinted yellow, one slightly smaller than the other. Put one piece of yellow glass down over the paper and it turns from white to slightly yellow. Put the slightly smaller piece of glass on top of that glass. Now, where ever there is two panes of glass, it is even darker yellow.

That is essentially what you are doing with css here.

The body element is the paper which is defined as green: background-color: green;

The header is the next layer you are placing down and it is semi transparent (because you are telling it to have opacity with the last param in the rgba background-color: rgba(0, 0, 0, 0.2);) so you get a tinted color wherever the header overlays on top of the body.

Now you have another element you are placing inside the header. It has its own margins so it doesn't cover up the entire header completely. So you place the nav item inside the header. Per css it also has a background color with opacity background-color: rgba(0, 0, 0, 0.2) so it will cause that area to be even darker.

CSS: Where have the margins and paddings it's background-color from?

1 Answers1