Pourquoi les propriétés de hauteur et de largeur ne fonctionnent-elles pas sur les éléments Span et comment puis-je les faire fonctionner ?

Élément Span et propriétés de hauteur/largeur

En CSS, l'élément span est un élément en ligne. Cela signifie qu’il n’a pas de largeur ou de hauteur inhérente et qu’il n’occupe que l’espace nécessaire pour accueillir son contenu. Par conséquent, la définition des propriétés de hauteur et de largeur pour un élément span n'aura aucun effet.

Cependant, vous pouvez transformer l'élément span en un élément de niveau bloc en utilisant la propriété display. Les éléments au niveau du bloc peuvent avoir une hauteur et une largeur spécifiées, et ils occuperont une zone rectangulaire sur la page.

Pour que l'élément span ressemble à un bouton, vous pouvez définir la propriété d'affichage sur inline-block ou block . Cela vous permettra d'appliquer les propriétés de hauteur et de largeur et de styliser l'élément selon vos besoins.

Voici une version mise à jour de votre code CSS avec la propriété d'affichage ajoutée :

span.product__specfield_8_arrow {
    display: inline-block; /* or block */
    background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}

Avec ce changement , l'élément span se comportera comme un élément de niveau bloc et prendra les dimensions de hauteur et de largeur spécifiées.

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!