Maison > Article > interface Web > Remplissage d'image HTML

Remplissage d'image HTML

WBOYoriginal: 2024-09-04 16:49:491058parcourir

La propriété padding en HTML donne de l'espace autour du contenu de l'élément le plus interne de la structure en forme de boîte. La propriété margin en HTML fournit un espace autour du contenu de l’élément le plus externe de la structure en forme de boîte. L'espace autour du remplissage et de la marge s'appelle une bordure.

La différence entre le remplissage, la marge et la bordure que vous pouvez observer ci-dessous :

Comme nous connaissons les styles communs à toutes les pages, nous avons toujours préféré le CSS au HTML.
Toutes les propriétés communes sont implémentées uniquement en CSS.

Comment fonctionne le remplissage d'image en HTML ou CSS ?

Le remplissage crée toujours un espace entre les parties les plus internes, qu'il s'agisse d'une image ou d'un contenu.
Remplissage avec image défini par la balise img en CSS uniquement.

Syntaxe 1 :

img
{
Padding: 10px,10px,10px,10px; //padding positions
}

Syntaxe 1 Explication :

Si nous appliquons un remplissage avec 4 valeurs, la première valeur est pour le haut, la deuxième valeur est pour la droite, la troisième est pour le bas et la quatrième est pour la gauche appliquée, respectivement.

Syntaxe 2 :

img
{
Padding: 10px,10px,10px; //padding positions
}

Explication de la syntaxe :

Si nous appliquons un remplissage avec 3 valeurs, la première est pour le haut, la seconde est pour la gauche et la droite et la troisième est pour le bas appliqué.

Syntaxe 3 :

img
{
Padding: 10px,10px; //padding positions
}

Explication de la syntaxe :

Si nous appliquons un remplissage avec 2 valeurs, la première valeur est pour le haut et le bas, et la seconde est pour la gauche et la droite appliquées, respectivement.

Syntaxe 4 :

img
{
Padding: 10px; //padding positions
}

Explication de la syntaxe :

Si nous appliquons un remplissage avec seulement des valeurs uniques, utilisez-le de manière égale pour les quatre côtés.

Exemples de remplissage d'images HTML

Vous trouverez ci-dessous des exemples de remplissage d'image HTML :

Exemple n°1 – Remplissage d'image avec 4 valeurs de remplissage

Code HTML :

<!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>

Code CSS :

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

Sortie :

Avant d'appliquer le rembourrage :

Remplissage d'image HTML

Après avoir appliqué le rembourrage :

Remplissage d'image HTML

Explication :

Le nom de la première classe d'image, noPadding et le remplissage du nom de la deuxième classe d'image ont été pris en code HTML dans le code ci-dessus.
Dans le code CSS, la classe noPadding a sans remplissage avec une bordure de 5px. Aucun remplissage ne donne aucun espace autour de l'image. Il s'en tient strictement à la frontière. Vous pouvez le voir dans la 1^èreimage ci-dessus.
La classe padding a une bordure de remplissage de 50px et 50px. En raison de ce remplissage autour de l'image, nous avons vu un peu d'espace depuis la bordure. Vous pouvez le voir dans la 2^èmeimage.

Exemple n°2 – Remplissage d'image avec 3 valeurs de remplissage

Code HTML :

<!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>

Code CSS :

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

Sortie :

Avant d'appliquer le rembourrage :

Remplissage d'image HTML

Après avoir appliqué le rembourrage :

Remplissage d'image HTML

Explication :

Dans le code ci-dessus, le nom de la première classe d'image, noPadding et le remplissage du nom de la deuxième classe d'image ont été pris en code HTML.
Dans le code CSS, la classe noPadding a sans remplissage avec une bordure de 5px. Aucun remplissage ne donne aucun espace autour de l'image. Il s'en tient strictement à la frontière. Vous pouvez le voir dans la 1^èreimage ci-dessus.
La classe padding a une bordure de remplissage de 50px, 20px, 50px et 5px. En raison de ce remplissage autour de l'image en haut de 50 pixels, à gauche et à droite de 20 pixels et de 50 pixels en bas, respectivement. Nous avons vu un peu d'espace depuis la frontière. Vous pouvez le voir dans la 2^èmeimage.

Exemple n°3 – Remplissage d'image avec 3 valeurs de remplissage

Code HTML :

<!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>

Code CSS :

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

Sortie :

Avant d'appliquer le rembourrage :

Remplissage d'image HTML

Après avoir appliqué le rembourrage :

Remplissage d'image HTML

Explication :

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>

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:

Remplissage d'image HTML

After applying padding:

Remplissage d'image HTML

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html if for include class Property this href margin padding border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Bouton HTML onclickArticle suivant：Bouton HTML onclick

Articles Liés

Voir plus