Bilder werden verwendet, um das Erscheinungsbild von Webseiten zu verbessern und sie effektiv zu entwerfen. Als Webentwickler können Sie mit HTML mehrere Bilder hinzufügen und auf Ihrer Website stylen. Diese Bilder sind jedoch standardmäßig sehr genau beabstandet, aber Sie können den Speicherplatz mit CSS entsprechend Ihren Vorlieben anpassen.

In diesem Artikel werden wir lernen:

• Fügen Sie Platz zwischen den Bildern mit “hinzu“Netz”
• Fügen Sie Platz zwischen den Bildern mit “hinzu“biegen”
• Fügen Sie Platz zwischen den Bildern mit “hinzu“Rand”

Um Platz zwischen Bildern zu erstellen, lesen Sie zunächst die Methode, um Bilder in HTML hinzuzufügen, und dann werden wir Platz zwischen ihnen erstellen.

Also lasst uns anfangen!

So fügen Sie Bilder in Div hinzu?

Um Bilder in der DIV hinzuzufügen, erstellen wir zunächst einen Container mit dem “Tag und zuweisen Sie den Klassennamen als "div”. Im Tag werden wir eine Überschrift hinzufügen

. Erstellen Sie als NächstimgIn dem wir sechs Bilder mithilfe des Tags hinzufügen und die darin enthaltene Bildquelle angeben.

Html

Fügen Sie Platz zwischen den Bildern hinzu

Verwenden Sie in der CSS -Datei ““div”Zu Zugang zum erstellten Container in HTML. Wir werden die Höhe der Div als “anpassenAuto”, Um das Div selbst automatisch gemäß seinen Elementen zu arrangieren. Um die Div zu stylen, fügen Sie die Hintergrundfarbe als "hinzuRGB (170, 138, 172)"Und setzen Sie die Grenzbreite als" als "10px", Stil als"Rille", Und Farbe als"RGB (77, 0, 80)”. Wir werden auch die Farbe der Überschrift als “einstellenRGB (77, 0, 80)”.

CSS

div
Höhe: Auto;
Hintergrund: RGB (170, 138, 172);
Grenze: 10px Groove RGB (77, 0, 80);
Farbe: RGB (77, 0, 80);

Hier können Sie sehen, dass die Bilder in der DIV hinzugefügt werden, sie jedoch nicht organisiert sind und keinen gleichen Raum dazwischen haben:

Jetzt werden wir mit drei verschiedenen Methoden Platz zwischen diesen Bildern schaffen.

Methode 1: Fügen Sie Platz zwischen den Bildern mit "Raster" hinzu

Um Platz zwischen den Bildern hinzuzufügen, verwenden Sie das CSS “Anzeige”Eigenschaft und setzen Sie ihre Werte als"Netz”, Die das Element in einem Gitterbehälter einstellen.

Syntax

Die Syntax der Anzeigeeigenschaft lautet:

Anzeige: Grid;

Lassen Sie uns das vorherige Beispiel fortsetzen und Platz zwischen den Bildern schaffen.

Beispiel

Wir werden den Wert der Anzeigeeigenschaft als “festlegenNetz„Bilder in einer Gitterform anzeigen. Erstellen Sie dann drei Spalten, indem Sie das „verwenden“Grid-Template-Säulen”Eigenschaft und drei Zeilen mit der“Raster-Template-Reihen”. Stellen Sie dann die Brüche als "fest1fr","1fr", Und "1fr”Für Zeilen und Spalten, was bedeutet, dass sie den gleichen Raum erworben haben. Danach nutzen Sie die “Säulenlücke" Und "Zeilenlücke”Eigenschaften, um einen Speicherplatz zu schaffen und seinen Wert als" festlegen "festlegen"25px”:

img
Anzeige: Grid;
Grid-Template-Säulen: 1fr 1fr 1fr;
Grid-Template-Reihen: 1FR 1FR 1FR;
Zeilenklappe: 25px;
Säulenlücke: 25px;

Hier können Sie sehen, dass der Raum zwischen den Bildern erstellt wird, aber wenn wir den Browser ändern, wirkt sich das Layout der Bilder aus:

Wechseln wir zur zweiten Methode!

Methode 2: Fügen Sie Platz zwischen den Bildern mit "Flex" hinzu

Im Rahmen von CSS kann die Anzeigeeigenschaft auf “gesetzt werden“biegen”. Diese Funktion ermöglicht die Flexibilität und Einstellbarkeit des Inhalts oder der Elemente. Es schafft auch den gleichen Raum zwischen den Elementen und ermöglicht es, Elemente effizient anzuordnen.

Syntax

Anzeige: Flex

Gemäß der obigen Syntax wird der Wert der Anzeigeeigenschaft als "festgelegt" festgelegt "biegen”.

Schauen wir uns also das Beispiel an, um mit Flex Platz zwischen den Bildern hinzuzufügen.

Beispiel

Wir werden das vorherige Beispiel fortsetzen und drei Bilder in der DIV festlegen. Setzen Sie danach den Wert der Anzeigeeigenschaft als “biegen"Und die Lücke zwischen Ikonen als"25px" Verwendung der "Lücke" Eigentum:

.img
Anzeige: Flex;
Lücke: 25px;

Sie können beobachten, dass die Bilder durch den Raum getrennt sind, aber wenn der Browser verändert wird, werden die Bilder von den Kanten abgeschnitten:

Um die oben genannte Einschränkung zu überwinden, die “RandEigenschaft wird verwendet.

Methode 3: Fügen Sie Platz zwischen den Bildern mit "Rand" hinzu

Verwendung der "RandEigenschaft, Sie können Platz zwischen Bildern in CSS schaffen. Es fügt einen transparenten Bereich um ein Element hinzu. Sie können den Rand von der linken, rechten, oberen und unteren Seite eines Elements von einem Element einstellen. Insbesondere ist es eine Kurzeigenschaft für “links","Randrecht","Rand", Und "Randboden”. Alle Werte der gegebenen Eigenschaften können in einer Zeile eingestellt werden.

Syntax

Die Syntax der Margin -Eigenschaft lautet:

Rand: Auto | oben rechts unten links

Die Beschreibung der obigen bereitgestellten Syntax ist unten angegeben:

• Auto: Es wird verwendet, um Elemente nach dem Browser einzustellen.
• Spitze: Es gibt den Rand von oben an.
• Rechts: Es wird verwendet, um den Rand von rechts einzustellen.
• Taste: Es wird verwendet, um den Rand von unten anzupassen.
• links: Es gibt den Rand von links an.

Notiz: Durch das Hinzufügen von zwei Werten werden die Ränder von oben und unten sowie von links und rechts angegeben. Das Hinzufügen eines Wertes wendet die Marge jedoch auf alle vier Seiten an.

Wenn wir das vorherige Beispiel fortsetzen, werden wir jetzt Platz zwischen den Bildern schaffen.

Beispiel

Hier werden wir verwenden “img”Zu dem Zugriff auf die im HTML hinzugefügten Bilder und setzen Sie die Breite und Höhe der Bilder als"150px”. Danach werden wir den Margin-Top als "als" festlegen "0px", Randrechte als"10px", Randboden als"30pxUnd Margin-links als "20px”:

img
Breite: 180px;
Höhe: 180px;
Rand: 0px 10px 30px 20px;

Die angegebene Ausgabe zeigt, dass der Speicherplatz erstellt wird und das Layout der Bilder nicht gestört wird oder die Bilder nicht abgeschnitten werden, wenn der Browser geändert wird:

Das ist es! Wir haben die Methode erklärt, um Platz zwischen Bildern mit drei verschiedenen Methoden hinzuzufügen.

Abschluss

Drei verschiedene Methoden von CSS können verwendet werden, um den Abstand zwischen Bildern zu erstellen, nämlich die “Netz" Und "biegenWerte der Anzeigeeigenschaft und die “Rand" Eigentum. Mit diesen Eigenschaften können Sie Räume zwischen Bildern erstellen. Die CSS -Margin -Eigenschaft funktioniert jedoch am besten. In diesem Handbuch haben wir diese drei Methoden im Detail erläutert und Beispiele für jede Methode angegeben.