Obrazy służą do poprawy wyglądu stron internetowych i do skutecznego projektowania. Jako programista internetowy HTML umożliwia dodawanie wielu obrazów i stylizowanie ich na swojej stronie internetowej. Jednak obrazy te są domyślnie bardzo ściśle rozmieszczone, ale możesz dostosować przestrzeń do CSS zgodnie z preferencjami.

W tym artykule dowiemy się:

• Dodaj przestrzeń między obrazami za pomocą „siatka"
• Dodaj przestrzeń między obrazami za pomocą „przewód"
• Dodaj przestrzeń między obrazami za pomocą „margines"

Aby utworzyć przestrzeń między obrazami, najpierw sprawdź metodę dodawania obrazów w HTML, a następnie stworzymy przestrzeń między nimi.

Więc zacznijmy!

Jak dodać obrazy w div?

Aby dodać obrazy w div, najpierw utworzymy kontener za pomocą „”Tag i przypisz nazwę klasy jako„div". Wewnątrz tagu dodamy nagłówek

. Następnie utwórz nazwę klasy podziału jako „img”W którym dodamy sześć obrazów za pomocą znacznika i określenie w nim źródła obrazu.

Html

Dodaj przestrzeń między obrazami

W pliku CSS użyj „div„Aby uzyskać dostęp do utworzonego pojemnika w HTML. Dostosujemy wysokość Div jako „automatyczny„Aby umożliwić DIV automatycznie się zorganizować zgodnie z jego elementami. Aby stylizować div, dodaj kolor tła jako „RGB (170, 138, 172)”I ustaw szerokość graniczną jako„10px”, Styl jako„rowek”, I kolor jako„RGB (77, 0, 80)". Ustawimy również kolor nagłówka jako „RGB (77, 0, 80)".

CSS

div
Wysokość: auto;
Tło: RGB (170, 138, 172);
granica: 10px rgob RGB (77, 0, 80);
Kolor: RGB (77, 0, 80);

Tutaj widać, że obrazy są dodawane w Div, ale nie są one zorganizowane i nie mają między sobą równej przestrzeni:

Teraz stworzymy przestrzeń między tymi obrazami przy użyciu trzech różnych metod.

Metoda 1: Dodaj przestrzeń między obrazami za pomocą „siatki”

Aby dodać przestrzeń między obrazami, użyj CSS ”wyświetlacz”Właściwość i ustawiaj jego wartości jako„siatka”, Który dostosuje element w pojemniku siatkowym.

Składnia

Składnia właściwości wyświetlacza to:

Wyświetlacz: siatka;

Kontynuujmy poprzedni przykład i stwórz przestrzeń między obrazami.

Przykład

Ustawimy wartość właściwości wyświetlania jako „siatka„Aby wyświetlić obrazy w formie siatki. Następnie utwórz trzy kolumny za pomocą „Kolecki z kratami”Własność i trzy rzędy za pomocą„Rowki z kratą siatki". Następnie ustaw frakcje jako „1fr”,„1fr", I "1fr”W przypadku rzędów i kolumn, co oznacza, że ​​nabyli równą przestrzeń. Następnie użyj „luka w kolumnie" I "Gapa w wierszach„Właściwości w celu utworzenia miejsca i ustawienia jej wartości jako„25px”:

img
Wyświetlacz: siatka;
Kolecka z kradzieży siatki: 1FR 1FR 1FR;
Rowki z kratą siatki: 1FR 1FR 1FR;
Gapa wiersza: 25px;
Gapa w kolumnie: 25px;

Tutaj widać, że przestrzeń jest tworzona między obrazami, ale kiedy rozmiar przeglądarki wpływa na układ obrazów:

Przejdźmy do drugiej metody!

Metoda 2: Dodaj przestrzeń między obrazami za pomocą „Flex”

W ramach CSS właściwość wyświetlacza może być ustawiona na „przewód". Ta funkcja umożliwia elastyczność i regulację treści lub elementów. Tworzy również równą przestrzeń między elementami, umożliwiając efektywne układanie elementów.

Składnia

Wyświetlacz: Flex

Zgodnie z powyższą składnią wartość właściwości wyświetlacza jest ustawiona jako „przewód".

Sprawdźmy więc przykład, aby dodać przestrzeń między obrazami za pomocą Flex.

Przykład

Będziemy kontynuować poprzedni przykład i ustawić trzy obrazy w Div. Następnie ustaw wartość właściwości wyświetlania jako „przewód”I luka między ikonami jako„25px" używając "luka" nieruchomość:

.img
Wyświetlacz: Flex;
Gap: 25px;

Możesz zauważyć, że obrazy są oddzielone przez przestrzeń, ale po zmianie przeglądarki obrazy są odcięte z krawędzi:

Aby przezwyciężyć wyżej wymienione ograniczenie, „margines„Własność jest używana.

Metoda 3: Dodaj przestrzeń między obrazami za pomocą „Margin”

Używając "margines„Własność, możesz tworzyć przestrzeń między obrazami w CSS. Dodaje przezroczysty obszar wokół elementu. Możesz ustawić margines z lewej, prawej strony, górnej i dolnej strony elementu. Mówiąc dokładniej, jest to nieruchomość skrótem dla „margines lewic”,„margines-prawy”,„margines", I "-but-ds". Wszystkie wartości danych właściwości można ustawić w jednym wierszu.

Składnia

Składnia właściwości marginesu to:

Margines: Auto | po prawej górnej części dolnej lewej

Opis powyższej składni podano poniżej:

• automatyczny: Jest wykorzystywany do regulacji elementów zgodnie z przeglądarką.
• szczyt: Określa margines od góry.
• Prawidłowy: Służy do ustawiania marginesu z prawej strony.
• przycisk: Służy do regulacji marginesu od dołu.
• lewy: Określa margines od lewej.

Notatka: Dodanie dwóch wartości określi marginesy od góry i dolnej, a także od lewej i prawej; Jednak dodanie jednej wartości zastosuje margines do wszystkich czterech stron.

Kontynuując poprzedni przykład, teraz stworzymy przestrzeń między obrazami.

Przykład

Tutaj użyjemy „img„Aby uzyskać dostęp do obrazów dodanych w HTML i ustaw szerokość i wysokość obrazów jako„150px". Następnie ustalimy margines „” jako „0px”, Margines-prawy jako„10px”, Margines-dany jako„30px”I margines-lewane jako„20px”:

img
szerokość: 180px;
Wysokość: 180px;
Margines: 0px 10px 30px 20px;

Dane wyjście pokazuje, że przestrzeń jest tworzona, a układ obrazów nie jest zakłócany lub obrazy nie są odcięte po rozmiarach przeglądarki:

Otóż ​​to! Wyjaśniliśmy metodę dodawania przestrzeni między obrazami przy użyciu trzech różnych metod.

Wniosek

Do tworzenia odstępów między obrazami można zastosować trzy różne metody CSS, a mianowicie „siatka" I "przewód”Wartości właściwości wyświetlania i„margines" nieruchomość. Dzięki tym właściwościom możesz tworzyć przestrzenie między obrazami. Jednak nieruchomość CSS Margin działa najlepiej. W tym podręczniku szczegółowo wyjaśniliśmy te trzy metody i podaliśmy przykłady dla każdej metody.