[Résolu] Span box sizing

Bonjour,

Sur le span class onsale "SALE!" :
http://demo.woothemes.com/storefront/product-category/clothing/

Qu'est ce qui fait qu'un border est compris dans la taille totale et comment peut-on faire en sorte que le border ne prenne pas en compte le background-color du span ?

J'ai d'abord pensé à block vs inline, puis à box-sizing mais rien ne change.
Modifié par Manhattan (01 Jun 2016 - 16:51)

Hello,

C'est bien box-sizing:border-box qui prend en compte la bordure (et le padding) dans la taille de l’élément. Dans ton cas, modifier la propriété, ne change rien car la longueur du span n'est pas définie.

Pour la couleur, je suis pas sur d'avoir compris le soucis.

A+
Modifié par Oken (01 Jun 2016 - 14:00)

Hmmm...

Si je colle ça :

box-sizing: border-box;
display: block (ou inline-block);
width: 90px;
height: 30px;
border : 1px dotted;
background: red;

Et que je zoooooome, mon red s'infiltre dans le border dotted donc la taille totale intègre le border ou bien j'ai encore pas tout capté ?

Bonjour !

Je suis troublée par votre question : 'box-sizing : border-box' est bien la propriété qui fait intervenir la bordure (et le padding aussi) dans le calcul de la dimension d'une boite... à condition que le span soit en 'display : block' ou 'inline-block' bien sûr...

Pour l'autre partie, mille excuses mais je n'ai pas saisi : la couleur du background-color est toujours présente mais sous la bordure... 'background-clip : padding-box' empêche cela mais cela n'a d'intérêt que si la bordure présente des transparences...

Bref, je sens que je n'ai pas été utile...

Et bien j'ai ma réponse. Bullshit, je raconte n'imp. Je viens de transformer 2 éléments distincts (un a et un span) en roues de vtt (oui, euh, c'est un site de vélos ) par le biais de box-shadow successifs suivis par un border dotted pour les crampons, d'où le besoin de transparence en dehors des crampons. Sur le premier élément, j'ai pu jouer avec le blanc pour simuler la transparence, sur le second élément, en fonction des couleurs que je souhaite, je suis obligé de trouver une solution pour ne pas voir le background-color sous le border dotted
M'en vais tester background-clip moua ^^

Merchi à vous deux, ma question était assez mal exprimée en vérité et mon esprit fatigué.

Edit : Magnifique, wunderbar, c'est juste parfait ^^

J'adore jouer avec les dotted et dashed trop peu utilisés dans le design web.
Modifié par Manhattan (03 Jun 2016 - 14:05)