Wenn Sie Bilder in CSS formatieren, sollten Sie zur besseren Organisation Leerzeichen zwischen den Bildern einf\u00fcgen. Schlie\u00dflich wollen Sie, dass Ihre Webseite optisch ansprechend und sauber aussieht. Wie f\u00fcgen Sie also \u00fcberhaupt Leerzeichen zwischen Bildern in CSS ein? Wenn Sie ganz neu in CSS sind und nicht wissen, wie Sie Abst\u00e4nde zwischen Inhalten wie Bildern einf\u00fcgen k\u00f6nnen, dann sind Sie hier genau richtig. <\/p>\n\n
Bevor ich mit dieser Anleitung fortfahre, m\u00f6chte ich mich bei Alpha Containers<\/a> und Propstep<\/a> bedanken, die diesen Artikel erm\u00f6glicht haben!<\/p>\n\n Diese Anleitung f\u00fcr Einsteiger zeigt Ihnen, wie Sie in CSS Leerraum zwischen Bildern einf\u00fcgen k\u00f6nnen. Au\u00dferdem gibt es viele M\u00f6glichkeiten, wie Sie in CSS Leerraum zwischen Bildern einf\u00fcgen k\u00f6nnen. In diesem Leitfaden werden jedoch die Einsteigermethoden verwendet, die Sie beim Einf\u00fcgen von Leerraum zwischen Bildern und anderen Arten von Inhalten verwenden w\u00fcrden. <\/p>\n\n Bevor Sie mit den verschiedenen Methoden fortfahren, die Sie verwenden k\u00f6nnen, m\u00fcssen Sie zun\u00e4chst mit dem CSS Box Model vertraut sein. Das CSS Box Model besteht aus vier Teilen (dem Inhalt oder Ihrem Bild, padding, border und margin), die es Ihnen erm\u00f6glichen, Zwischenr\u00e4ume in der Mitte Ihrer Elemente hinzuzuf\u00fcgen. Und um in CSS Platz zwischen Bildern einzuf\u00fcgen, k\u00f6nnen Sie zwischen der Eigenschaft margin oder padding w\u00e4hlen. <\/p>\n\n Der \u00e4u\u00dferste Teil des CSS-Box-Modells ist die Eigenschaft margin, die einen transparenten Bereich an der Au\u00dfenseite des Rahmens erzeugt. Zun\u00e4chst m\u00fcssen Sie wissen, welche Teile Sie mit R\u00e4ndern versehen m\u00f6chten, um einen besseren Abstand zu erhalten. <\/p>\n\n Sie k\u00f6nnen die Randeigenschaften margin-top, margin-right, margin-bottom und margin-left verwenden. Obwohl sie ziemlich selbsterkl\u00e4rend sind, erfahren Sie im Folgenden, was Sie \u00fcber diese Randeigenschaften wissen m\u00fcssen: <\/p>\n\n margin-top: f\u00fcgt einen Rand am oberen Rand Ihres Bildes hinzu<\/p>\n\n margin-right: f\u00fcgt einen Rand auf der rechten Seite Ihres Bildes hinzu<\/p>\n\n margin-bottom: f\u00fcgt einen Rand am unteren Rand Ihres Bildes hinzu<\/p>\n\n margin-left: f\u00fcgt einen Rand am linken Rand Ihres Bildes hinzu<\/p>\n\n Nachdem Sie festgelegt haben, welche Teile Sie mit R\u00e4ndern versehen m\u00f6chten, m\u00fcssen Sie nun entscheiden, welche Werte Sie hinzuf\u00fcgen m\u00f6chten. Sie k\u00f6nnen Ihren Wert als Prozentsatz (in %) oder als L\u00e4nge definieren. L\u00e4ngen sind Einheiten, die aus Pixeln (px), Punkten (pt) oder Zentimetern (cm) bestehen. <\/p>\n\n Sie k\u00f6nnen auch positive oder negative Werte hinzuf\u00fcgen, um den Abstand zwischen Ihren Bildern zu vergr\u00f6\u00dfern oder zu verkleinern. Hier finden Sie einen Beispielcode: <\/p>\n\n .sample-image {<\/p>\n\n Rand oben: 10px;<\/p>\n\n Rand rechts: 20px;<\/p>\n\n margin-bottom: 30px;<\/p>\n\n Rand links: 40px;<\/p>\n\n }<\/p>\n\n Sie k\u00f6nnen nach Belieben Werte f\u00fcr alle R\u00e4nder hinzuf\u00fcgen. Andererseits k\u00f6nnen Sie auch nur bestimmte Werte f\u00fcr bestimmte R\u00e4nder hinzuf\u00fcgen. Wenn Sie zum Beispiel nur am unteren Rand Ihrer Fotos einen Rand hinzuf\u00fcgen m\u00f6chten, k\u00f6nnen Sie den Code einfach nur auf diese Weise deklarieren: <\/p>\n\n .sample-image {<\/p>\n\n margin-bottom: 30px;<\/p>\n\n }<\/p>\n\n Die Verwendung der Shorthand-Eigenschaft margin ist definitiv der schnellste Weg, um in CSS Abstand zwischen Bildern einzuf\u00fcgen. Sie k\u00f6nnen also alternativ die Kurzeigenschaft margin verwenden und Ihren CSS-Code wie folgt schreiben: <\/p>\n\n Beispiel:<\/p>\n\n .sample-image {<\/p>\n\n Rand: 20px;<\/p>\n\n }<\/p>\n\n Sie k\u00f6nnen mindestens einen Wert und maximal vier Werte hinzuf\u00fcgen, um Ihre R\u00e4nder mit der Kurzschriftmethode zu definieren. Beachten Sie jedoch, dass sich das Hinzuf\u00fcgen verschiedener Werte mit der Stenografie-Methode unterschiedlich auf Ihre R\u00e4nder auswirkt. <\/p>\n\n Der Beispielcode unten verwendet vier Werte f\u00fcr die Eigenschaft shorthand, um alle Randeigenschaften individuell zu definieren. Wenn Sie Ihren Code auf diese Weise schreiben, werden Ihrem Bild die folgenden entsprechenden R\u00e4nder hinzugef\u00fcgt: <\/p>\n\n .sample-image {<\/p>\n\n Rand: 15px 10px 5px 20px;<\/p>\n\n }<\/p>\n\n Oberer Rand: 15px<\/p>\n\n Rechter Rand: 10px<\/p>\n\n Unterer Rand: 5px<\/p>\n\n Linker Rand: 20px<\/p>\n\n Andererseits k\u00f6nnen Sie auch einfach drei Werte hinzuf\u00fcgen, indem Sie die Shorthand-Eigenschaft f\u00fcr margin verwenden. Wenn Sie den folgenden Code verwenden, werden Ihrem Bild die folgenden R\u00e4nder hinzugef\u00fcgt: <\/p>\n\n Beispiel:<\/p>\n\n .sample-image {<\/p>\n\n Rand: 15px 10px 20px;<\/p>\n\n }<\/p>\n\n Oberer Rand: 15px<\/p>\n\n Rechte und linke R\u00e4nder: 10px<\/p>\n\n Unterer Rand: 20 px<\/p>\n\n Sie k\u00f6nnen auch einfach zwei Werte hinzuf\u00fcgen. Mit dem Beispielcode unten f\u00fcgen Sie Ihrem Bild die folgenden R\u00e4nder hinzu: <\/p>\n\n Beispiel:<\/p>\n\n .sample-image {<\/p>\n\n Rand: 15px 20px;<\/p>\n\n }<\/p>\n\n Obere und untere R\u00e4nder: 15px<\/p>\n\n Rechte und linke R\u00e4nder: 20px<\/p>\n\n Schlie\u00dflich k\u00f6nnen Sie einen Wert hinzuf\u00fcgen, wenn Sie die Eigenschaft margin verwenden. Wenn Sie Ihren Code auf diese Weise schreiben, werden die R\u00e4nder auf die besagte Gr\u00f6\u00dfe eingestellt. <\/p>\n\n .sample-image {<\/p>\n\n Rand: 15px;<\/p>\n\n }<\/p>\n\n Alle R\u00e4nder: 10px<\/p>\n\n Das Padding ist ein weiteres Element des CSS-Box-Modells. Das padding dient als der Raum, der den Inhalt umgibt und befindet sich in der Mitte zwischen dem Inhalt und dem Rand. \u00c4hnlich wie der Rand ist auch das Padding transparent. Paddings werden in der Regel hinzugef\u00fcgt, um sicherzustellen, dass Ihr Inhalt (in diesem Fall Bilder) die Grenzen des entsprechenden Box-Elements nicht ber\u00fchrt. <\/p>\n\n Auch hier m\u00fcssen Sie festlegen, welche Elemente Sie mit Auff\u00fcllungen versehen wollen. Sie k\u00f6nnen die Eigenschaften padding-top, padding-right, padding-bottom und padding-left verwenden, um Ihrem Bild Auff\u00fcllungen hinzuzuf\u00fcgen. Dabei funktioniert die Eigenschaft padding \u00e4hnlich wie die Eigenschaft margin. Hier ist also, was Sie dar\u00fcber wissen m\u00fcssen: <\/p>\n\n padding-top: f\u00fcgt dem oberen Rand Ihres Bildes eine Auff\u00fcllung hinzu<\/p>\n\n padding-right: f\u00fcgt eine Auff\u00fcllung rechts von Ihrem Bild hinzu<\/p>\n\n padding-bottom: f\u00fcgt dem unteren Rand Ihres Bildes eine Auff\u00fcllung hinzu<\/p>\n\n padding-left: f\u00fcgt eine Auff\u00fcllung links von Ihrem Bild hinzu<\/p>\n\n Sie k\u00f6nnen auch w\u00e4hlen, ob Sie einen bestimmten Prozentsatz oder eine bestimmte L\u00e4nge f\u00fcr Ihre Auff\u00fcllung hinzuf\u00fcgen m\u00f6chten. Anders als bei der Eigenschaft margin k\u00f6nnen Sie jedoch keine negativen Werte verwenden. Hier ist ein Beispielcode, den Sie sich ansehen k\u00f6nnen: <\/p>\n\n .sample-image {<\/p>\n\n padding-top: 20px;<\/p>\n\n padding-right: 50px;<\/p>\n\n padding-bottom: 30px;<\/p>\n\n padding-left: 40px;<\/p>\n\n }<\/p>\n\n Auch hier k\u00f6nnen Sie beim Hinzuf\u00fcgen zu Ihren Bildern einfach darauf verzichten, alle Auff\u00fcllungen zu definieren. Wenn Sie z.B. nur in der Mitte des Containers und des Bildes oben Platz lassen wollen, k\u00f6nnen Sie den folgenden Code verwenden: <\/p>\n\n .sample-image {<\/p>\n\n padding-top: 30px;<\/p>\n\n }<\/p>\n\n Wenn Sie sich fragen, ob es noch eine andere einfache M\u00f6glichkeit gibt, in CSS Abstand zwischen Bildern einzuf\u00fcgen, dann lautet die Antwort: Ja. \u00c4hnlich wie bei der Eigenschaft margin k\u00f6nnen Sie auch eine andere M\u00f6glichkeit nutzen, um schnell Abst\u00e4nde zwischen Ihren Bildern oder Inhalten einzuf\u00fcgen. Dazu verwenden Sie die Kurzform padding. Hier ist ein Beispiel: <\/p>\n\n .sample-image {<\/p>\n\n padding: 20px 5px 10px 15px;<\/p>\n\n }<\/p>\n\n \u00c4hnlich wie bei margin k\u00f6nnen Sie bei der Definition der Abst\u00e4nde mit shorthand mindestens einen Wert und h\u00f6chstens vier Werte hinzuf\u00fcgen. Auch hier wirken sich unterschiedliche Mengen von Werten unterschiedlich auf Ihre Auff\u00fcllungen mit der Eigenschaft shorthand aus. <\/p>\n\n \u00c4hnlich wie bei der Eigenschaft margin k\u00f6nnen Sie auch vier Werte hinzuf\u00fcgen, um alle Padding-Eigenschaften einzeln zu definieren. Der unten stehende Beispielcode f\u00fchrt zu den folgenden Auff\u00fcllungen: <\/p>\n\n .sample-image {<\/p>\n\n padding: 15px 10px 5px 20px;<\/p>\n\n }<\/p>\n\n Top padding: 15px<\/p>\n\n Rechte Polsterung: 10px<\/p>\n\n Bottom padding: 5px<\/p>\n\n Linke Polsterung: 20px<\/p>\n\n Sie k\u00f6nnen auch einfach drei Werte mit der Eigenschaft shorthand eingeben. Mit dem unten stehenden Code erhalten Sie die folgenden Auff\u00fcllungen f\u00fcr Ihre Bilder: <\/p>\n\n .sample-image {<\/p>\n\n padding: 15px 10px 20px;<\/p>\n\n }<\/p>\n\n Top padding: 15px<\/p>\n\n Rechte und linke Polsterung: 10px<\/p>\n\n Bottom padding: 20px<\/p>\n\n Wenn Sie zwei Werte unter Verwendung der Shorthand-Eigenschaft wie im folgenden Beispielcode addieren, erhalten Sie die folgenden Abst\u00e4nde:<\/p>\n\n .sample-image {<\/p>\n\n padding: 15px 20px;<\/p>\n\n }<\/p>\n\n Polsterung oben und unten: 15px<\/p>\n\n Rechte und linke Polsterung: 20px<\/p>\n\n Schlie\u00dflich k\u00f6nnen Sie auch einfach nur einen Wert zur Eigenschaft padding hinzuf\u00fcgen, wenn Sie einheitliche Werte f\u00fcr alle Ihre Auff\u00fcllungen w\u00fcnschen. Mit dem Beispielcode unten erhalten Sie die folgenden Auff\u00fcllungen: <\/p>\n\n .sample-image {<\/p>\n\n padding: 15px;<\/p>\n\n }<\/p>\n\n Alle Auff\u00fcllungen: 15px<\/p>\n\n Dies sind die wichtigsten M\u00f6glichkeiten, wie Sie in CSS Leerraum zwischen Bildern einf\u00fcgen k\u00f6nnen. Solange Sie wissen, welche Methoden Sie verwenden und Ihre Inhalte manipulieren, sollten Sie in der Lage sein, Ihren Bildern effizient Leerr\u00e4ume hinzuzuf\u00fcgen. Ich w\u00fcnsche Ihnen viel Erfolg beim Lernen von CSS und bei Ihrem Projekt! <\/p>\n\nVertrautmachen mit dem CSS-Box-Modell<\/h2>\n\n
Hinzuf\u00fcgen von Abstand zwischen Bildern in CSS mit der Eigenschaft Margin<\/h2>\n\n
Hinzuf\u00fcgen von R\u00e4ndern mit der Eigenschaft margin<\/h2>\n\n
1. Hinzuf\u00fcgen von vier Werten zur Eigenschaft shorthand margin<\/h3>\n\n
2. Hinzuf\u00fcgen von drei Werten zu der Eigenschaft shorthand margin<\/h3>\n\n
3. Hinzuf\u00fcgen von zwei Werten zur Eigenschaft shorthand margin<\/h3>\n\n
4. Hinzuf\u00fcgen eines Wertes zur Eigenschaft shorthand margin<\/h3>\n\n
Hinzuf\u00fcgen von Leerraum zwischen Bildern in CSS mit der Eigenschaft Padding<\/h2>\n\n
Hinzuf\u00fcgen von Auff\u00fcllungen mit der Eigenschaft shorthand padding<\/h2>\n\n
1. Hinzuf\u00fcgen von vier Werten zu der Eigenschaft shorthand padding<\/h3>\n\n
2. Hinzuf\u00fcgen von drei Werten zur Eigenschaft shorthand padding<\/h3>\n\n
3. Hinzuf\u00fcgen von zwei Werten zur Eigenschaft shorthand padding<\/h3>\n\n
4. Hinzuf\u00fcgen eines Wertes zur Eigenschaft shorthand padding<\/h3>\n\n
Fazit<\/h2>\n\n