Maison >interface Web >tutoriel CSS >Comment utiliser le pourcentage de remplissage ou la marge basée sur la hauteur du conteneur parent en CSS ?

Comment utiliser le pourcentage de remplissage ou la marge basée sur la hauteur du conteneur parent en CSS ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-18 10:04:14654parcourir

How to Use Percentage Padding or Margin Based on Parent Container Height in CSS?

Comment définir le remplissage ou la marge en pourcentage de la hauteur du conteneur parent

Lorsque vous essayez d'aligner un élément verticalement à l'aide de CSS, cela peut sembler logique pour définir la propriété padding-top ou margin-top en pourcentage de la hauteur du conteneur parent. Cependant, l'utilisation de pourcentages avec padding-top et margin-top donne des valeurs relatives à la largeur du conteneur, provoquant un comportement inattendu lorsque la largeur du conteneur change.

La solution

Pour définir le remplissage ou la marge en pourcentage de la hauteur du conteneur parent, évitez d'utiliser padding-top et margin-top. Au lieu de cela, définissez la propriété top ou bottom de l'élément dans le conteneur parent.

`

<div>

<div>

`

Explication

En utilisant la propriété top, la position de l'élément enfant est maintenant par rapport à la hauteur du conteneur parent, garantissant que l'alignement vertical reste cohérent quelle que soit la largeur du conteneur.

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!

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:Comment puis-je lire et mettre en pause des vidéos HTML5 à l'aide de jQuery ?Article suivant:Comment puis-je lire et mettre en pause des vidéos HTML5 à l'aide de jQuery ?

Articles Liés

Voir plus