Kulan
.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).
Martijn
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.
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
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>
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>
benutzen font-size:0 zum übergeordneten Element
10059200cookie-checkVertikaler Abstand zwischen zwei Inline-Blöcken und einem Blockelementyes
Das liegt an der Nichtübereinstimmung zwischen der Höhe von .rectangle und der Rahmenbreite von .triangle. Sie können es anpassen, um den Abstand zwischen den divs zu entfernen
– Yaser Ali Peedikakkal
22. Juli 2016 um 9:08 Uhr
Der Grund, warum Sie diesen Platz haben, ist die unterschiedliche vertikale Ausrichtung Ihrer Inline-Blöcke – ziehen Sie in Betracht, dieselbe zu verwenden, und das Problem wird behoben.
– Anton Borizkiy
22. Juli 2016 um 12:44 Uhr