Wie man Blöcke in CSS lückenlos macht-Front-End-Fragen und Antworten-php.cn

Wie man Blöcke in CSS lückenlos macht

藏色散人

Freigeben： 2023-01-03 09:31:03

Original

1748 Leute haben es durchsucht

So implementieren Sie CSS-Blöcke ohne Lücken: Erstellen Sie zunächst eine HTML-Beispieldatei. Definieren Sie dann einen Inline-Element-Span als Inline-Block-Element und entfernen Sie schließlich die Leerzeichen zwischen Tags.

Wie man Blöcke in CSS lückenlos macht

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

Bei der Erstellung mobiler Seiten verwende ich in letzter Zeit oft Inline-Block-Elemente zum Layouten, aber ich werde unweigerlich auf ein Problem stoßen ist die Lücke zwischen Inline-Block-Elementen. Diese Lücken verursachen einige Layoutprobleme und müssen entfernt werden. Hier finden Sie eine kurze Zusammenfassung der Inline-Block-Elemente und Methoden zum Entfernen von Lücken.

Hinweis: In HTML sind div, p, hx, form, ul, li, dl und dd Elemente auf Blockebene.

Was ist Inline-Block?

Inline-Block ist ein Inline-Block, der in der CSS-Elementklassifizierung in drei Typen unterteilt werden kann: Inline-Elemente oder Inline-Elemente, Elemente auf Blockebene und Inline-Blockelemente.

Inline-Blockelemente weisen die Eigenschaften von Inline-Elementen und Elementen auf Blockebene auf: (1) Elemente können horizontal angeordnet werden (2) können als Elemente auf Blockebene verwendet werden, um verschiedene Attribute festzulegen, z. B. Breite, Höhe, Abstand Warten.

Beispiel 1: Definieren Sie einen Inline-Element-Span als Inline-Block-Element

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
    background: red;
    display:inline-block;　　 
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie man Blöcke in CSS lückenlos macht

Das Entfernen von Inline-Block verursacht Div-Lücken:

1. Entfernen Sie den Leerraum zwischen Tags

Die Der Grund für die Lücken zwischen Elementen sind die Leerzeichen zwischen den Element-Tags. Wenn Sie die Leerzeichen entfernen, verschwinden die Lücken auf natürliche Weise.

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
    background: red;
    display:inline-block;　　 
}
</style>
</head>
<body>
<div>这是一个div</div><div>这是一个div</div><div>这是一个div</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie man Blöcke in CSS lückenlos macht

2. Fügen Sie alle Divs in das gleiche Div ein

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
div{
    
    background: red;
    display:inline-block;    　　 
}
</style>
</head>
<body>
    <div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie man Blöcke in CSS lückenlos macht

3. Lösen Sie dieses Problem, indem Sie die Schriftgröße auf 0 setzen des übergeordneten Elements

Diese Methode eignet sich für Divs, die nur Bilder enthalten

[Empfohlenes Lernen: CSS-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonWie man Blöcke in CSS lückenlos macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!