Explication de la propriété CSS : remplissage

1. La relation entre le remplissage et la taille du conteneur

　Pour les éléments horizontaux de bloc : ①La valeur de remplissage devient folle, ce qui affectera certainement la taille ; pas auto, padding Affecte la taille ; ③width est auto ou box-sizing est border-box, et la valeur de padding ne devient pas folle et n'affecte pas la taille.

Pour les éléments horizontaux en ligne : le remplissage horizontal affecte la taille, le remplissage vertical n'affecte pas la taille, mais affecte la couleur d'arrière-plan. Lorsque le remplissage vertical est trop grand pour dépasser le conteneur parent, cela affectera scrollHeight.

2. Valeurs de remplissage négatives et valeurs en pourcentage

À propos du remplissage des valeurs négatives : le remplissage ne prend en charge aucune forme de valeurs négatives.

Concernant la valeur du pourcentage de padding : le pourcentage de padding est calculé par rapport à la largeur.

La valeur du pourcentage de remplissage des éléments horizontaux en ligne : ① est également calculée par rapport à la largeur ; ② les détails de hauteur et de largeur par défaut sont différents ; ③ le remplissage brisera les lignes.

3. Remplissage intégré des éléments d'étiquette

Liste ol/ul : l'élément ol/li a un remplissage intégré à gauche, mais l'unité n'est pas px. em, comme le navigateur Chrome. Le bas est de 40 pixels, donc si la taille de la police est petite, l'espacement sera grand, et si la taille de la police est grande, le numéro de série sortira du conteneur. Petite expérience : lorsque la taille du texte est de 12 à 14 px, une valeur de remplissage à gauche de 22 à 25 px sera plus appropriée.

Autres éléments : ① tous les navigateurs ont un remplissage intégré dans les zones de saisie/zone de texte ; ② tous les navigateurs ont un remplissage intégré dans les boutons ; ③ certains navigateurs ont un remplissage intégré ; dans la liste déroulante de sélection, comme Firefox IE8+, vous pouvez définir le remplissage ; ④ Toutes les cases à cocher uniques des radios/cases à cocher du navigateur n'ont pas de remplissage intégré ⑤ Le remplissage des éléments de bouton est le plus difficile à contrôler ;

remplissage des boutons du formulaire de bouton :

Lorsque vous créez des boutons, utilisez la balise 🎜>　

4. Rembourrage et dessin graphique

　

5. Remplissage et mise en page

Utilisez des unités de pourcentage pour créer une structure de mise en page à proportion fixe :

Avec une mise en page de hauteur égale :

Mise en page adaptative à deux colonnes :

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!