Remplissage d'image HTML-tutoriel HTML-php.cn

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 :

Remplissage d'image HTML

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
}

Copier après la connexion

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
}

Copier après la connexion

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
}

Copier après la connexion

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
}

Copier après la connexion

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>

Copier après la connexion

Code CSS :

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

Copier après la connexion

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>

Copier après la connexion

Code CSS :

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

Copier après la connexion

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>

Copier après la connexion

Code CSS :

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

Copier après la connexion

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>

Copier après la connexion

CSS Code:

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

Copier après la connexion

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: