przestrzeń w pionie między dwoma inline-block i elementu blokowego

Question

.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>

Skąd to się bierze? Jak się go pozbyć bez ujemnych marginesów (ponieważ na niektórych ekranach mogą się nakładać).

Answer 1

innych odpowiedzi dostarczyć rozwiązania, ale nie dlaczego tak się dzieje:

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

W tym ciągu zaznaczyłem trzy znaki. Te trzy mają tak zwane "decenders" (np .: pętla pod G, nogi pod Y i J).
Po zadeklarowaniu czegoś inline-block uzyskuje właściwości obu elementów: block i inline. Elementami śródliniowymi są często tekst (, np. lub), dlatego mają one decki, a więc twój div ma miejsce dla decybeli.

To dlaczego ustawienie line-height:0; font-size:0; załatwia sprawę.

Answer 2

jego powodu line-height, także Twój .rectangle brakowało 1px w wysokości (143-> 144)

UWAGA: nie jestem pewien, czy to jest cross-browser, więc rozważyć użycie float: left zamiast

.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>

Answer 3

istnieje wiele rozwiązanie tego

Rozwiązanie 0: Brak przestrzeni między elementami

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

Rozwiązanie 1: font-size: 0 na Dominującą

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

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

Rozwiązanie 2: HTML Komentarze

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

Rozwiązanie 3: Negatywne M Argin

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

Rozwiązanie 4: Usunięcie Zamknięcie Kąt

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

more about this

Answer 4

Można użyć elementu CSS pseudo :after w tym przypadku.

Sprawdź poniżej przykład:

.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>

Answer 5

użycie font-size:0 do elementu nadrzędnego