So entfernen Sie Lücken zwischen Inline- oder Inline-Block-Elementen

Methoden zum Entfernen von Lücken zwischen Inline- oder Inline-Block-Elementen sind: Entfernen Sie den Abstand zwischen Element-Tags, verwenden Sie negative Ränder, setzen Sie die Schriftgröße beim übergeordneten Element auf Null und lassen Sie das schließende Tag weg.

Im Seitenlayout verwenden wir oft Inline-Elemente und Inline-Block-Elemente, aber wir werden unweigerlich auf ein Problem stoßen, das heißt, zwischen diesen Elementen gibt es Lücken sie (wie unten gezeigt), was einige Layoutprobleme verursachen wird. Wie kann man also die Lücken zwischen diesen Elementen löschen? Im Folgenden stellen wir verschiedene Methoden vor (am Beispiel des Inline-Elements). Ich hoffe, dass dies für alle hilfreich ist. [Empfohlene verwandte Video-Tutorials: HTML-Tutorial, CSS-Tutorial]

<div class="demo">     
     <span>我是一个span。</span>
       <span>我是一个span。</span>
     <span>我是一个span。</span>
     <span>我是一个span。</span>
     <span>我是一个span。</span>
</div>

rrree

Rendering:

Entfernen Sie das Leerzeichen zwischen Element-Tags

Der Grund für die Lücke zwischen Elementen ist das Leerzeichen zwischen Element-Tags (der Browser interpretiert das Zeilenumbruchzeichen in HTML und Leerzeichen). werden in Inhalte analysiert.), entfernen Sie die Leerzeichen und die Lücken verschwinden auf natürliche Weise. Es gibt mehrere Methoden, um Leerzeichen zwischen Element-Tags zu entfernen:

Methode eins:

.demo{
	width: 450px;
	height: 200px;
	margin: 10px auto;
	font-size: 20px;	
}
.demo span{
	background:#ddd;
}

Methode zwei:

<div class="demo">
    <span>我是一个span。</span><span>我是一个span。</span><span>我是一个span。</span><span>我是一个span。</span><span>我是一个span。</span>
</div>

Methode 3: Verwenden Sie HTML-Kommentar-Tags

Verwenden Sie HTML-Kommentar-Tags , um die Leerzeichen zwischen Elementen zu kommentieren, um das Durchsuchen zu ermöglichen Der Prozessor analysiert keine Leerzeichen mehr.

<div class="demo">
    <span>我是一个span。
    </span><span>我是一个span。
    </span><span>我是一个span。
    </span><span>我是一个span。
    </span><span>我是一个span。</span>
</div>

Rendering:

Negative Ränder verwenden

Sie können die Einstellungen verwenden Das Randattribut ist ein negativer Wert, um das Element wieder an seine ursprüngliche Position zu verschieben. Es muss entsprechend der Schriftgröße des übergeordneten Elements angepasst werden.

<div class="demo">
    <span>我是一个span。</span><!--
    --><span>我是一个span。</span><!-- 
    --><span>我是一个span。</span><!-- 
    --><span>我是一个span。</span><!--
    --><span>我是一个span。</span>
</div>

HINWEIS: Dies ist in älteren IE (6 und 7) problematisch.

Schriftgröße für das übergeordnete Element festlegen: 0;

Leerzeichen ist ein Zeichenraum, daher gilt auch das Festlegen der Schriftgröße auf Null Macht die Größe des Leerzeichens auf Null. Um jedoch andere Elemente anzuzeigen, muss die Schriftgröße des untergeordneten Elements auf die gewünschte Größe zurückgesetzt werden.

span{
margin-left: -6px;
}

Das schließende Tag weglassen

In HTML5 können Sie das schließende Tag weglassen und das Leerzeichen zwischen den Tags löschen. Um jedoch mit IE6/IE7 kompatibel zu sein, können Sie das schließende Tag des letzten Elements hinzufügen.

.demo{
    width: 400px;
    height: 200px;
    font-size: 0;
}
.demo span{
    background:#ddd;
    font-size: 20px;
}

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonSo entfernen Sie Lücken zwischen Inline- oder Inline-Block-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!