Vertikaler Abstand zwischen zwei Inline-Blöcken und einem Blockelement

Question 1

.rectangle {
    width: 420px;
    height: 143px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px 0px 20px 10px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 92px solid transparent;
    border-bottom: 92px solid transparent;
    border-left:45px solid rgba(0, 0, 0, 0.7);
    display: inline-block;
}

.block {
  width: 200px;
  height: 80px;
  background: red;
}

<div class="rectangle"></div><!--
--><div class="triangle"></div>
<div class="block"></div>

Woher kommt das? Wie man es ohne negative Ränder loswird (weil sie sich auf einigen Bildschirmen überlappen können).

Question 2

Die anderen Antworten liefern Lösungen, aber nicht die warum das passiert:

Some given funny joke
-----^---------^-^

In dieser Zeichenfolge habe ich drei Zeichen markiert. Diese drei haben so genannte ‘Decender‘ (zB: die Schleife unter dem G, die Beine unter dem Y und J).
Wenn du etwas erklärst inline-blockerhält es die Eigenschaften von beiden block und inline Elemente. Die Inline-Elemente sind oft Text (z.B a oder span), haben also Decender, also Ihr div hat Platz für Decender.

Das ist warum Einstellung line-height:0; font-size:0; macht den Trick.

Question 3

Dafür gibt es viele Lösungen

Lösung 0: Kein Leerzeichen zwischen Elementen

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

Lösung 1: font-size: 0 auf Parent

.inline-block-list { /* ul or ol with this class */
    font-size: 0;
}

.inline-block-list li {
    font-size: 14px; /* put the font-size back */
}

Lösung 2: HTML-Kommentare

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

Lösung 3: Negative Marge

.inline-block-list li {
    margin-left: -4px;
}

Lösung 4: Verringern des Schließwinkels

<ul>
    <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

mehr dazu

Question 4

Sie können CSS-Pseudoelemente verwenden :after in diesem Fall.

Überprüfen Sie das folgende Beispiel:

.rectangle {
  width: 420px;
  height: 143px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 20px 0px 20px 10px;
  position: relative;
  vertical-align: top;
}
.rectangle:after {
  top: 0;
  left: 100%;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 92px solid transparent;
  border-bottom: 92px solid transparent;
  border-left: 45px solid rgba(0, 0, 0, 0.7);
}
.block {
  width: 200px;
  height: 80px;
  background: red;
}

<div class="rectangle"></div>
<div class="block"></div>

Question 5

es liegt daran line-heightauch dein .rectangle fehlte 1 Pixel in der Höhe (143->144)

HINWEIS: Ich bin mir nicht sicher, ob dies ein Cross-Browser ist, also erwägen Sie die Verwendung float: left stattdessen

.rectangle {
    width: 420px;
    height: 144px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px 0px 20px 10px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 92px solid transparent;
    border-bottom: 92px solid transparent;
    border-left:45px solid rgba(0, 0, 0, 0.7);
    display: inline-block;
}

.block {
  width: 200px;
  height: 80px;
  background: red;
}
.wrapper{
  line-height: 0;
}

<div class="wrapper"><div class="rectangle"></div><!--
--><div class="triangle"></div><!--
--><div class="block"></div></div>

Question 6

benutzen font-size:0 zum übergeordneten Element