Nicht benötigte Leerzeichen zwischen divs. Kann nicht davon

Question

hier los ist Bild mein Problem

CSS für Wrapper

für jedes DIV

display: block; 
text-align: center; 

CSS ist die Anzeige ist

margin: 30px 10px; 
display: inline-block; 
height: 100%; 
text-align: center; 
width: 30%; 

Was verursachen könnte Dies? Ich habe versucht, mit Flex zu spielen, aber das Ergebnis ist das gleiche.

Answer 1

Sie sagten, Sie haben mit Flexbox fiedled. Um es jedoch zu nutzen, sollten Sie nicht nur damit herumspielen, sondern lernen, wie es funktioniert.

Um zu erreichen, was Sie wollen, verwenden Sie display: flex; auf der Verpackung div und entfernen height Eigentum von Ihrem enthaltenen div s.

Führen Sie dieses visuelle Beispiel zu sehen, wie es funktioniert:

.parent { 
 
    padding: 20px; 
 
    background: red; 
 
    width: 400px; 
 
    height: 100px; 
 
    display: flex; 
 
} 
 

 
.child-1 { 
 
    background: yellow; 
 
    width: 100px; 
 
} 
 

 
.child-2 { 
 
    background: orange; 
 
    width: 100px; 
 
}

<div class="parent"> 
 
    <div class="child-1"> 
 
    Hello 
 
    </div> 
 
    <div class="child-2"> 
 
    Multi 
 
    <br> 
 
    Line 
 
    <br> 
 
    Content 
 
    </div> 
 
</div>