HTML-Bildauffüllung-HTML-Tutorial-php.cn

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:

HTML-Bildauffüllung

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
}

Nach dem Login kopieren

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
}

Nach dem Login kopieren

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
}

Nach dem Login kopieren

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
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

CSS-Code:

.noPadding
{
width:400px;
height:400px;
border: 5px solid brown;
}
.padding
{
width:400px;
height:400px;
padding: 50px 50px 50px 50px;
}

Nach dem Login kopieren

Ausgabe:

Vor dem Auftragen der Polsterung:

HTML-Bildauffüllung

Nach dem Auftragen der Polsterung:

HTML-Bildauffüllung

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 ersten^erstenBild 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>

Nach dem Login kopieren

CSS-Code:

.noPadding
{
width:400px;
height:400px;
border: 5px solid yellow;
}
.padding
{
width:400px;
height:400px;
padding: 50px 20px 50px;
border: 5px solid yellow;
}

Nach dem Login kopieren

Ausgabe:

Vor dem Auftragen der Polsterung:

HTML-Bildauffüllung

Nach dem Auftragen der Polsterung:

HTML-Bildauffüllung

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 ersten^erstenBild 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&gt
</body>
</html>

Nach dem Login kopieren

CSS-Code:

.noPadding
{
width:400px;
height:400px;
border: 5px solid yellow;
}
.padding
{
width:400px;
height:400px;
padding: 75px 50px;
border: 5px solid yellow;
}

Nach dem Login kopieren

Ausgabe:

Vor dem Auftragen der Polsterung:

HTML-Bildauffüllung

Nach dem Auftragen der Polsterung:

HTML-Bildauffüllung

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 1^stimage.
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 2^ndimage.

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>

Nach dem Login kopieren

CSS Code:

.noPadding
{
width:400px;
height:400px;
border: 5px solid blue;
}
.padding
{
width:400px;
height:400px;
padding: 70px;
border: 5px solid blue;
}

Nach dem Login kopieren

Output:

Before applying padding:

HTML-Bildauffüllung

After applying padding:

HTML-Bildauffüllung

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 1^stimage.
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 2^ndimage.

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.

Note: To include css file in HTML, use tag.

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!