Fügen Sie Platz zwischen HTML -Elementen nur mit CSS hinzu

Der Raum zwischen dem HTML -Element spielt eine entscheidende Rolle in Dokumenten. Für einen Benutzer ist es schwierig, eine Seite schnell zu scannen und zu bestimmen, was verknüpft ist und was nicht, wenn es keine Lücken gibt. Daher ist es wichtig, einen Raum zwischen allen Elementen im Dokument zu behalten. Zu diesem Zweck werden in jeder Sprache verschiedene Methoden verwendet, um Platz zwischen den Elementen hinzuzufügen, einschließlich CSS.

In diesem Tutorial wird die Methode zum Hinzufügen von Platz zwischen HTML -Elementen unter Verwendung von CSS -Eigenschaften demonstriert.

So addieren/fügen Sie Platz zwischen HTML -Elementen nur mit CSS hinzu/?

Verwenden Sie die “, um den Platz zwischen HTML -Elementen nur mit CSS zu verleihenElement zum Hinzufügen von Daten zur HTML -Seite. Dann greifen Sie auf das Element zu und wenden Sie an “Anzeige"Mit den Werten"Netz","Grid-Template-Reihen/Spalte", Und "Gitterlack”CSS -Eigenschaften.

Befolgen Sie dazu den genannten Verfahren.

Schritt 1: Machen Sie einen DIV -Behälter

Nutzen Sie zuerst die “Element, um einen Div -Container auf der HTML -Seite zu erstellen. Fügen Sie außerdem ein Klassenattribut ein und geben Sie einen Namen für das Klassenelement für die spätere Verwendung an.

Schritt 2: Erstellen Sie einen verschachtelten Div -Container

Erstellen Sie als nächstes einen weiteren Div -Container, indem Sie demselben Verfahren folgen.

Schritt 3: Fügen Sie Daten mit dem Element "Span" hinzu

Danach benutzen Sie die “Element zwischen dem verschachtelten Div -Container zum Einfügen von Daten:

Gegenstand 1
Punkt 2
Punkt 3





Punkt 4
Punkt 5
Punkt 6

Schritt 4: Stil „Div“ -Stil -Behälter

Greifen Sie mit Hilfe des Klassennamens auf den Haupt -Div -Container zu ".hauptsächlich”:

.hauptsächlich
Grenze: 4px Festes Grün;
Polsterung: 30px;
Rand: 40px;

Wenden Sie dann die folgenden Eigenschaften an:

• “GrenzeEigenschaft wird verwendet, um die Grenze um das Element anzugeben.
• “Polsterung”Zuweist in einer definierten Grenze die Weltraum -Außenseite des Elements.
• “Rand”Bestimmt den Raum in einer HTML -Seite um den definierten Grenze.

Ausgang

Schritt 5: Style "Span" -Container

Zugang nun auf die “SpanneContainer und wenden Sie die im folgenden Codeblock erwähnten CSS -Eigenschaften an:

Spanne
Grenze: 3px Groove Blue;
Hintergrundfarbe: RGB (240, 224, 137);
Text-Align: Mitte;

Hier:

• “HintergrundfarbeEigenschaft definiert die Farbe am Hintern des Elements.
• “Textausrichtung”Wird verwendet, um die Ausrichtung des Textes im definierten Element festzulegen.

Schritt 6: Fügen Sie Platz zwischen den Elementen in der Spalte hinzu

Verwenden Sie nun die “Ausweis"Selektor"#"Und der Wert der" Ausweis”Zu Zugang zum Behälter. Wenden Sie dann die folgenden Eigenschaften an, um Platz zwischen den Elementen hinzuzufügen:

#Spalte
Anzeige: Grid;
Rand: 20px 40px;
Grid-Template-Säulen: Wiederholung (automatisch Fill, Auto);
Raster-Lack: 14px;

Hier:

• “AnzeigeDie Eigenschaft bestimmt das Anzeigenverhalten des Zugriffselements. Dazu wird der Wert dieser Eigenschaft als "festgelegt" festgelegt "Netz”. Das CSS-Gitterlayout definiert ein mehrdimensionales Netzsystem für CSS.
• “Grid-Template-Säulen”Zugewiesen die Anzahl und Größe der Spalten im Rasterbehälter.
• “Gitterlack”Fügt Platz zwischen Elementen hinzu, die nur auf Netzelementen funktionieren.

Schritt 7: Fügen Sie Platz zwischen den Elementen in Zeilen hinzu

Greifen Sie nun mit Hilfe des ID -Werts auf den inneren Div -Container zu und wenden Sie die CSS -Eigenschaften an:

#Reihen
Anzeige: Grid;
Rand: 20px 40px;
Grid-Template-Reihen: Wiederholung (automatisch fill, automatisch);
Raster-Lack: 20px;

Dann wenden Sie die “an“Anzeige","Rand","Gitterlack", Und "Raster-Template-Reihen" Eigenschaften. Der "Raster-Template-ReihenDefinieren Sie die Höhe und Anzahl der Reihen in einem angegebenen Layout des Netzes:

Sie haben gelernt, Platz zwischen HTML -Elementen mit nur CSS -Eigenschaften hinzuzufügen.

Abschluss

Um den Raum zwischen HTML -Elementen nur mit CSS hinzuzufügen, verwenden Sie die “Element zum Hinzufügen von Daten zur HTML -Seite. Dann greifen Sie auf das Element zu und wenden Sie an “Anzeige"Mit den Werten"Netz","Grid-Template-Reihen/Spalte", Und "Gitterlack”CSS -Eigenschaften, die verwendet werden. Diese Beschreibung hat das Verfahren zum Hinzufügen von Platz zwischen HTML-Elementen nur mit CSS erläutert.