Heim > Artikel > Web-Frontend > HTML-Bildauffüllung
HTML-Bildauffüllung
- WBOYOriginal
- 2024-09-04 16:49:491263Durchsuche
Die padding-Eigenschaft in HTML gibt Platz um den Inhalt des innersten Elements der kastenartigen Struktur. Die Eigenschaft „margin“ in HTML bietet Platz um den Inhalt des äußersten Elements der kastenförmigen Struktur. Der Raum um die Polsterung und den Rand wird als Rand bezeichnet.
Den Unterschied zwischen Polsterung, Rand und Rand können Sie unten beobachten:
- Da wir gemeinsame Stile auf allen Seiten kennen, haben wir immer CSS gegenüber HTML bevorzugt.
- Alle allgemeinen Eigenschaften werden nur in CSS implementiert.
Wie funktioniert das Auffüllen von Bildern in HTML oder CSS?
- Durch den Innenabstand entsteht immer Platz zwischen den innersten Teilen, egal ob Bild oder Inhalt.
- Auffüllen mit Bild wird nur durch das img-Tag in CSS definiert.
Syntax 1:
img
{
Padding: 10px,10px,10px,10px; //padding positions
}
Syntax 1 Erklärung:
Wenn wir die Polsterung mit 4 Werten anwenden, gilt der erste Wert für die Oberseite, der zweite Wert für die rechte Seite, der dritte für die Unterseite und der vierte für die linke Seite.
Syntax 2:
img
{
Padding: 10px,10px,10px; //padding positions
}
Syntaxerklärung:
Wenn wir die Polsterung mit 3 Werten anwenden, gilt der erste für die Oberseite, der zweite für links und rechts und der dritte für die Unterseite.
Syntax 3:
img
{
Padding: 10px,10px; //padding positions
}
Syntaxerklärung:
Wenn wir die Polsterung mit 2 Werten anwenden, gilt der erste Wert für oben und unten und der zweite für links bzw. rechts.
Syntax 4:
img
{
Padding: 10px; //padding positions
}
Syntaxerklärung:
Wenn wir die Polsterung nur mit einzelnen Werten anwenden, dann verwenden Sie sie gleichermaßen für alle vier Seiten.
Beispiele für HTML-Bildauffüllung
Im Folgenden finden Sie Beispiele für das Auffüllen von HTML-Bildern:
Beispiel #1 – Bildauffüllung mit 4 Auffüllungswerten
HTML-Code:
<!DOCTYPE html> <html> <head> <title>Image Padding</title> <link rel="stylesheet" href="ImagePaddingFourSides.css"></link> </head> <body> <font color="green"> <h2>Image without Padding</h2> </font> <p> <img src="Tulips.jpg" class="noPadding"> </p> <font color="green"> <h2>Image with Padding</h2> </font> <p> <img src="Tulips.jpg" class="padding"> </p> </body> </html>
CSS-Code:
.noPadding
{
width:400px;
height:400px;
border: 5px solid brown;
}
.padding
{
width:400px;
height:400px;
padding: 50px 50px 50px 50px;
}
Ausgabe:
Vor dem Auftragen der Polsterung:
Nach dem Auftragen der Polsterung:
Erklärung:
- Der Name der ersten Bildklasse, noPadding, und der Name der zweiten Bildklasse, wurden im obigen Code in HTML-Code übernommen.
- Im CSS-Code hat die noPadding-Klasse keine Auffüllung mit einem 5-Pixel-Rahmen. Durch die fehlende Polsterung entsteht kein Platz um das Bild herum. Es bleibt strikt an der Grenze. Sie können es im erstenersten Bild oben sehen.
- Die Auffüllklasse verfügt über eine Auffüllung von 50 Pixel und einen 50 Pixel-Rand. Aufgrund dieser Auffüllung um das Bild ist etwas Platz vom Rand entfernt. Sie können es im 2.. Bild sehen.
Beispiel #2 – Bildauffüllung mit 3 Auffüllungswerten
HTML-Code:
<!DOCTYPE html> <html> <head> <title>Image Padding</title> <link rel="stylesheet" href="ImagePaddingThreeSides.css"></link> </head> <body> <font color="green"> <h2>Image without Padding</h2> </font> <p> <img src="Koala.jpg" class="noPadding"> </p> <font color="green"> <h2>Image with Padding</h2> </font> <p> <img src="Tulips.jpg" class="padding"> </p> </body> </html>
CSS-Code:
.noPadding
{
width:400px;
height:400px;
border: 5px solid yellow;
}
.padding
{
width:400px;
height:400px;
padding: 50px 20px 50px;
border: 5px solid yellow;
}
Ausgabe:
Vor dem Auftragen der Polsterung:
Nach dem Auftragen der Polsterung:
Erklärung:
- Im obigen Code wurden der erste Bildklassenname, noPadding und der zweite Bildklassenname-Padding in HTML-Code übernommen.
- Im CSS-Code hat die noPadding-Klasse keine Auffüllung mit einem 5-Pixel-Rahmen. Durch die fehlende Polsterung entsteht kein Platz um das Bild herum. Es bleibt strikt an der Grenze. Sie können es im erstenersten Bild oben sehen.
- Die Auffüllklasse hat einen Auffüllrahmen von 50 Pixel, 20 Pixel, 50 Pixel und 5 Pixel. Aufgrund dieser Auffüllung beträgt das Bild oben jeweils 50 Pixel, links und rechts jeweils 20 Pixel und unten jeweils 50 Pixel. Wir haben etwas Platz von der Grenze gesehen. Sie können dies im 2.. Bild sehen.
Beispiel #3 – Bildauffüllung mit 3 Auffüllungswerten
HTML-Code:
<!DOCTYPE html> <html> <head> <title>Image Padding</title> <link rel="stylesheet" href="ImagePaddingTwoSides.css"></link> </head> <body> <font color="green"> <h2>Image without Padding</h2> </font> <p> <img src="Desert.jpg" class="noPadding"> </p> <font color="green"> <h2>Image with Padding</h2> </font> <p> <img src="Desert.jpg" class="padding"> </p> </body> </html>
CSS-Code:
.noPadding
{
width:400px;
height:400px;
border: 5px solid yellow;
}
.padding
{
width:400px;
height:400px;
padding: 75px 50px;
border: 5px solid yellow;
}
Ausgabe:
Vor dem Auftragen der Polsterung:
Nach dem Auftragen der Polsterung:
Erklärung:
- The first image class name, noPadding, and second image class name padding have been taken in HTML code in the above code.
- In CSS code, the noPadding class has without padding with a 5px border. No padding does not give any space around the image. It strictly sticks to the border. You can see it in the above 1st image.
- The padding class has padding 75px 50px and 5px border. Due to this, padding around the image’s top and bottom is 50px, and the left and right are 50px, respectively. We have seen some space from the border. You can see it in the 2nd image.
Example #4 – Image Padding with a Single Padding Value
HTML Code:
<!DOCTYPE html> <html> <head> <title>Image Padding</title> <link rel="stylesheet" href="ImagePaddingSingleSides.css"></link> </head> <body> <font color="green"> <h2>Image without Padding</h2> </font> <p> <img src="Penguins.jpg" class="noPadding"> </p> <font color="green"> <h2>Image with Padding</h2> </font> <p> <img src="Penguins.jpg" class="padding"> </p> </body> </html>
CSS Code:
.noPadding
{
width:400px;
height:400px;
border: 5px solid blue;
}
.padding
{
width:400px;
height:400px;
padding: 70px;
border: 5px solid blue;
}
Output:
Before applying padding:
After applying padding:
Explanation:
- The first image class name, noPadding, and second image class name padding have been taken in HTML code in the above code.
- In CSS code, the noPadding class has without padding with a 5px border. No padding does not give any space around the image. It strictly sticks to the border. You can see it in the above 1st image.
- The padding class has a padding of 70 and a 5px border. Due to this, we were padding around the image top, left, right and bottom 70px around, respectively. We have seen some space from the border. You can see it in the 2nd image.
If we want to apply only particular side padding, then CSS provides predefined properties:
- Padding-left: 10px: apply padding 10px to the left side.
- Padding-right: 10px: apply padding 10px to the right side.
- Padding-top: 10px: apply padding 10px to the top side.
- Padding-bottom: 10px: apply padding 10px bottom side.
Conclusion
Image padding gives space around the innermost portion. We can apply with one, two, three, and four values with padding inside the img tag.
Das obige ist der detaillierte Inhalt vonHTML-Bildauffüllung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!