wake-up-neo.com

Warum gibt es eine unerklärliche Lücke zwischen diesen Inline-Block-Div-Elementen?

Ich habe zwei Inline-Block div-Elemente, die gleich sind und nebeneinander angeordnet sind. Zwischen den beiden Divs scheint jedoch ein mysteriöser Abstand von 4 Pixeln zu bestehen, obwohl der Rand auf 0 gesetzt ist. Es gibt keine übergeordneten Divs, die sie beeinflussen. Was ist los?

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

Div problem

Ich möchte, dass es so aussieht:

What it SHOULD look like

256
Legatro

In diesem Fall wurden Ihre div-Elemente von block-Ebenenelementen in inline-Elemente geändert. Ein typisches Merkmal von inline-Elementen ist, dass sie den Leerraum im Markup berücksichtigen. Dies erklärt, warum zwischen den Elementen ein gap of space erzeugt wird. (Beispiel)

Es gibt einige Lösungen, mit denen dies gelöst werden kann.

Methode 1 - Entfernen Sie das Leerzeichen aus der Markierung

Beispiel 1 - Kommentieren Sie das Leerzeichen aus: (Beispiel)

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

Beispiel 2 - Entfernen Sie die Zeilenumbrüche: (Beispiel)

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

Beispiel 3 - Teil des Tags in der nächsten Zeile schließen (Beispiel)

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

Beispiel 4 - Schließen Sie das gesamte Tag in der nächsten Zeile: (Beispiel)

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

Methode 2 - Setzen Sie den font-size zurück

Da der Leerraum zwischen den inline-Elementen durch den font-size bestimmt wird, können Sie den font-size einfach auf 0 zurücksetzen und so den Abstand zwischen den Elementen entfernen.

Setzen Sie einfach font-size: 0 für die übergeordneten Elemente und deklarieren Sie dann einen neuen font-size für die untergeordneten Elemente. Dies funktioniert, wie hier demonstriert (Beispiel)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

Diese Methode funktioniert ziemlich gut, da keine Änderung der Markierung erforderlich ist. Es funktioniert jedoch nicht, wenn der font-size des untergeordneten Elements mit em units deklariert wird. Ich würde daher empfehlen, den Whitespace aus dem Markup zu entfernen, oder alternativ die Elemente verschieben, um den durch inline-Elemente erzeugten Platz zu vermeiden.

Methode 3 - Setzen Sie das übergeordnete Element auf display: flex

In einigen Fällen können Sie auch die display des übergeordneten Elements auf flex setzen. (Beispiel)

Dadurch werden effektiv die Leerzeichen zwischen den Elementen in unterstützten Browsern entfernt. Vergessen Sie nicht, geeignete Herstellerpräfixe für zusätzliche Unterstützung hinzuzufügen.

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


Seitennotizen:

Es ist unglaublich unzuverlässig, negative Abstände zu verwenden, um den Abstand zwischen inline-Elementen zu entfernen. Verwenden Sie keine negativen Margen, wenn es andere, optimalere Lösungen gibt.

520
Josh Crozier

Die Verwendung von inline-block ermöglicht Leerstellen in Ihrem HTML-Code. Dies entspricht normalerweise 0,25em (oder 4px).

Sie können entweder das Leerzeichen auskommentieren oder, als eine allgemeinere Lösung, den font-size des Elternteils auf 0 setzen und ihn für die Inline-Block-Elemente auf die erforderliche Größe zurücksetzen.

34
Paulie_D

inline-block setzt automatisch einen Standard-white-space, wie jeder sagt. (Dies liegt an den "inline" -Eigenschaften der Elemente, die dem Abstand zwischen Wörtern in einer Textzeichenfolge in Ihrem HTML-Markup entsprechen. Aus diesem Grund funktioniert auch das Entfernen von white-space im Markup.) Die einfachste Lösung besteht darin, einfach den Container zu float. (z. B. float: left;) In einer anderen Anmerkung sollte jede id eindeutig sein, dh Sie können dieselbe id nicht zweimal in demselben HTML-Dokument verwenden. Verwenden Sie stattdessen Klassen, in denen Sie dieselbe class für mehrere Elemente verwenden können.

.container {
    display: inline-block;
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}
14
bradcush

Ich habe eine Lösung gefunden, die Flex nicht beinhaltet, da Flex in älteren Browsern nicht funktioniert Beispiel:

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}
1
Larry

fügen Sie einfach einen Rand hinzu: 2px solid #e60000; zu Ihrem 2. div Tag CSS.

Auf jeden Fall funktioniert es

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}