Dodaj przestrzeń między elementami HTML tylko za pomocą CSS

Przestrzeń między elementem HTML odgrywa kluczową rolę w dokumentach. Użytkownikowi trudno jest szybko zeskanować stronę i ustalić, co jest połączone, a co nie, jeśli nie ma żadnych luk. Dlatego ważne jest utrzymanie przestrzeni między wszystkimi elementami w dokumencie. W tym celu w każdym języku wykorzystano różne metody dodawania przestrzeni między elementami, w tym CSS.

Ten samouczek pokaże metodę dodawania przestrzeni między elementami HTML za pomocą właściwości CSS.

Jak dodać/wstawić przestrzeń między elementami HTML tylko za pomocą CSS?

Aby dodać przestrzeń między elementami HTML tylko za pomocą CSS, użyj „”Element do dodania danych do strony HTML. Następnie uzyskaj dostęp do elementu i zastosuj „Zastosuj„wyświetlacz”Z wartościami„siatka”,„Rowki/kolumna z kratą kratą", I "GRID GAP”Właściwości CSS.

Aby to zrobić, postępuj zgodnie z wymienioną procedurą.

Krok 1: Zrób kontener DIV

Najpierw skorzystaj z „„Element do stworzenia kontenera Div na stronie HTML. Ponadto wstaw atrybut klasy i określ nazwę elementu klasy do późniejszego użycia.

Krok 2: Utwórz zagnieżdżony kontener Div

Następnie utwórz inny kontener Div, postępując zgodnie z tą samą procedurą.

Krok 3: Dodaj dane za pomocą elementu „Span”

Następnie użyj „”Element pomiędzy zagnieżdżonym kontenerem Div, aby wstawić dane:

Przedmiot 1
Pozycja 2
Pozycja 3





Pozycja 4
Pozycja 5
Pozycja 6

Krok 4: Style „Div” pojemnik

Uzyskaj dostęp do głównego kontenera Div za pomocą nazwy klasy jako „.główny”:

.główny
Border: 4px solidny zielony;
Wyściółka: 30px;
Margines: 40px;

Następnie zastosuj następujące właściwości:

• "granica„Właściwość jest używana do określenia granicy wokół elementu.
• "wyściółka”Przydziela kosmiczną stronę elementu na zdefiniowanej granicy.
• "margines”Określa przestrzeń na stronie HTML wokół zdefiniowanej granicy.

Wyjście

Krok 5: Pojemnik „Span” stylu

Teraz uzyskaj dostęp do „Zakres”Kontener i zastosuj właściwości CSS wspomniane w poniższym bloku kodu:

Zakres
Border: 3px Groove Blue;
kolor tła: RGB (240, 224, 137);
Text-Align: Center;

Tutaj:

• "kolor tła„Właściwość określa kolor z tyłu elementu.
• "tekst-align”Jest wykorzystywany do ustawiania wyrównania tekstu w zdefiniowanym elemencie.

Krok 6: Dodaj przestrzeń między elementami w kolumnie

Teraz skorzystaj z „ID„Selektor”#”I wartość” ID„Aby uzyskać dostęp do kontenera. Następnie zastosuj poniżej podawane właściwości, aby dodać przestrzeń między elementami:

#kolumna
Wyświetlacz: siatka;
Margines: 20px 40px;
Grid-Template-Columns: powtórz (automatyczne wypełnienie, auto);
Grid Gap: 14px;

Tutaj:

• "wyświetlacz”Właściwość określa zachowanie wyświetlania elementu dostępu. Aby to zrobić, wartość tej właściwości jest ustalana jako „siatka". Układ siatki CSS definiuje wielowymiarowy system siatki do CSS.
• "Kolecki z kratami”Przydziela liczbę i rozmiar kolumn wewnątrz pojemnika siatki.
• "GRID GAP”Dodaje przestrzeń między elementami, które działają tylko na elementach siatki.

Krok 7: Dodaj przestrzeń między elementami w rzędach

Teraz uzyskaj dostęp do wewnętrznego kontenera Div za pomocą wartości identyfikacyjnej i zastosuj właściwości CSS:

#wydziwianie
Wyświetlacz: siatka;
Margines: 20px 40px;
Grid-Template Rows: powtórz (automatyczne wypełnienie, auto);
Grid Gap: 20px;

Następnie zastosuj „wyświetlacz”,„margines”,„GRID GAP", I "Rowki z kratą siatki" nieruchomości. „„Rowki z kratą siatki”Zdefiniuj wysokość i liczbę wierszy w określonym układzie siatki:

Nauczyłeś się o dodawaniu przestrzeni między elementami HTML o właściwościach CSS.

Wniosek

Aby dodać przestrzeń między elementami HTML tylko za pomocą CSS, użyj „”Element do dodania danych do strony HTML. Następnie uzyskaj dostęp do elementu i zastosuj „Zastosuj„wyświetlacz”Z wartościami„siatka”,„Rowki/kolumna z kratą kratą", I "GRID GAP„Zastosowane są właściwości CSS. Ten zapis wyjaśnił procedurę dodawania przestrzeni między elementami HTML tylko za pomocą CSS.