Why Are Spaces Used to Separate Things in CSS

Why are spaces used to separate things in css

The space is known as the descendant combinator. blockquote cite selects any cite element within a blockquote element. Likewise for blockquote em and blockquote i.

In other words, it's not "if a blockquote tag is embedded into a cite tag", it's the other way around (besides, you can't place blockquotes in cites in the first place).

As you note, commas group selector sequences into the same rule.

What do commas and spaces in multiple classes mean in CSS?

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

As for the commas, it's applying one rule to multiple classes, like this.

.blueCheese, .blueBike {
  color:blue;
}

It's functionally equivalent to:

.blueCheese { color:blue }
.blueBike { color:blue }

But cuts down on verbosity.

Add space between HTML elements only using CSS

A good way to do it is this:

span + span {
    margin-left: 10px;
}

Every span preceded by a span (so, every span except the first) will have margin-left: 10px.

Here's a more detailed answer to a similar question: Separators between elements without hacks

Why is there an unexplainable gap between these inline-block div elements?

In this instance, your div elements have been changed from block level elements to inline elements. A typical characteristic of inline elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example)

There are a few solutions that can be used to solve this.

Method 1 - Remove the whitespace from the markup

Example 1 - Comment the whitespace out: (example)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

Example 2 - Remove the line breaks: (example)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

Example 3 - Close part of the tag on the next line (example)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

Example 4 - Close the entire tag on the next line: (example)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

Method 2 - Reset the font-size

Since the whitespace between the inline elements is determined by the font-size, you could simply reset the font-size to 0, and thus remove the space between the elements.

Just set font-size: 0 on the parent elements, and then declare a new font-size for the children elements. This works, as demonstrated here (example)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

This method works pretty well, as it doesn't require a change in the markup; however, it doesn't work if the child element's font-size is declared using em units. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elements and thus avoiding the space generated by inline elements.

Method 3 - Set the parent element to display: flex

In some cases, you can also set the display of the parent element to flex. (example)

This effectively removes the spaces between the elements in supported browsers. Don't forget to add appropriate vendor prefixes for additional support.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {    display: flex;}.parent > div {    display: inline-block;    padding: 1em;    border: 2px solid #f00;}

<div class="parent">    <div>text</div>    <div>text</div>    <div>text</div>    <div>text</div>    <div>text</div></div>

<div class="welcome">
    <section>
        <div>This will be selected</div>
    </section>
    <div>This will be selected as well</div>
</div>

.welcome div {
    font-size: 20px;
    color: #f00;
}

<div class="welcome">
    <section>
        <div>This won't be selected</div>
    </section>
    <div>This will be selected</div>
</div>

.welcome > div {
    font-size: 20px;
    color: #f00;
}

<div id="container">
  <div id="left"></div><div id="right"></div>
</div>

var left = document.getElementById("left");var right = document.getElementById("right");var info = document.getElementById("info");
var offset = 5;function toggleStyle() {  if (offset === 5) {    offset = 7;  } else {    offset = 5;  }  info.innerHTML = right.style = left.style = "width: calc(50% - " + offset + "px);";}
toggleStyle();

#container {  width: 300px;  height: 160px;  background-color: green;}
#left, #right {  display: inline-block;  background-color: blue;  height: 150px;  margin-top: 5px;  margin-bottom: 5px;}
#left {  margin-right: 5px;}
#right {  margin-left: 5px;}

<div id="info"></div><button onclick="toggleStyle()">Toggle</button><div id="container">  <div id="left"></div><div id="right"></div></div>

.sub-lead {
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

strong {
    letter-spacing: 3px;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700;800&display=swap" rel="stylesheet">
<div class="sub-lead">
    <strong>THE</strong> 8 5 2<strong> EXPERIENCE</strong> 9 0<strong> YOU</strong> 0 8 5<strong> ARE</strong>
</div>

.flagColumn {
    width: 33%;
    float: left;
    border:1px solid;
    height:1em;
    overflow:hidden;
}