Maison > Problème commun > Comment utiliser l'attribut padding en CSS

Comment utiliser l'attribut padding en CSS

小老鼠
Libérer: 2023-12-07 14:58:08
original
1408 Les gens l'ont consulté

En CSS, l'attribut padding est utilisé pour définir le remplissage d'un élément. Cela signifie qu'il définit l'espace entre le contenu de l'élément et sa bordure. La syntaxe de base est « padding : value ; ».

Comment utiliser l'attribut padding en CSS

En CSS, l'attribut padding est utilisé pour définir le remplissage d'un élément. Cela signifie qu'il définit l'espace entre le contenu de l'élément et sa bordure.

Syntaxe de base :

padding: value;
Copier après la connexion

La valeur ici peut avoir les formes suivantes :

Valeur de longueur : telle que px (pixels), em (unités relatives à la taille de police actuelle), rem (unités relatives à la taille de police du élément racine) ) attendez. Par exemple : padding : 10px ;

Pourcentage : par exemple 10 %. Ceci définit le remplissage par rapport à la largeur de l'élément. Par exemple : rembourrage : 10% ;

Transparence : par exemple transparent. Cela rendra le rembourrage complètement transparent.

Quatre valeurs :

Vous pouvez également définir le rembourrage sur les quatre côtés de l'élément séparément, comme indiqué ci-dessous :

padding: top right bottom left;
Copier après la connexion

Ici, le haut définit le rembourrage supérieur, la droite définit le rembourrage droit et le bas définit le rembourrage inférieur, à gauche. définit le remplissage gauche.

Exemple :

div {  
  padding: 10px;      /* 设置所有四个边的内边距为10px */  
}  
  
.container {  
  padding: 20px 15px;  /* 设置上边和下边的内边距为20px,左边和右边的内边距为15px */  
}
Copier après la connexion

Notez que la couleur d'arrière-plan de l'élément s'étend dans sa zone de remplissage, mais pas dans la bordure. Si l'élément n'a pas de bordures, la couleur d'arrière-plan s'étend dans la zone de contenu de l'élément.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal