Maison > interface Web > tutoriel CSS > Pourquoi mon élément Span n'accepte-t-il pas la largeur et la hauteur en CSS ?

Pourquoi mon élément Span n'accepte-t-il pas la largeur et la hauteur en CSS ?

Mary-Kate Olsen
Libérer: 2024-12-03 11:56:13
original
631 Les gens l'ont consulté

Why Won't My Span Element Accept Width and Height in CSS?

Hauteur et largeur ne s'appliquant pas à la durée : une solution

Lorsque vous travaillez avec des portées en CSS, il est important de se rappeler qu'il s'agit d'éléments en ligne par défaut. Cela signifie qu'ils n'accepteront pas naturellement les dimensions de largeur et de hauteur.

Le problème décrit dans la question implique de styliser une travée pour qu'elle ressemble à un bouton. Le développeur a essayé de définir la largeur et la hauteur à l'aide de l'indicateur !important, mais cela n'a pas fonctionné. En effet, les éléments en ligne comme les travées n'ont pas de dimensions inhérentes.

Pour résoudre ce problème, la solution consiste à convertir la travée en un élément de niveau bloc. Ceci peut être réalisé en ajoutant l'affichage : inline-block ; (ou display: block;) en span dans le CSS.

Voici un exemple :

span.product__specfield_8_arrow {
    display: inline-block;
    width: 50px;
    height: 33px;
    ... (remaining styles)
}
Copier après la connexion

En changeant la propriété display en inline-block, le span se comportera désormais comme un élément de niveau bloc. Cela lui permet d'accepter et d'afficher les dimensions de largeur et de hauteur comme prévu, offrant ainsi l'apparence de bouton souhaitée.

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal