Adapter la largeur d'un input quand on ajout un padding

Bonjour à tous

J'ai un problème surement banal.
J'ai un "boite" (Fancybox) avec une largeur féfinie. Dedans, j'ai un formulaire et mes input font la largeur de cette boite.
J'ai donc définit la largeur ainsi

Code:

---

1 2 3

input{ width:100% }

---

Le problème, c'est que je souhiate que le texte qu'on rentre, dans ces inputs, ne touche pas les bord. Donc j'ai ajouté un padding

Code:

---

1 2 3 4

input{ width:100%; padding:8px; }

---

Il se trouve que maintenant, mes input déborde, car la largeur de 16px à été rajoutée.

Comment je peux donc soustraire 16px à une valeur donnée en %?
Ou comment, je peux ajouter un padding, sans que cette largeur soit "ajoutée"?

Merci pour vos lumières

https://developer.mozilla.org/fr/doc...CSS/box-sizing

dans ton cas:

Code:

---

1 2 3 4 5

input{ width:100%; padding:0 10px; box-sizing: border-box; }

---

mais c'est sans doute la pire manière de procéder
parce qu'il faut mieux utiliser un reset css, même s'il est minimal

Comment je peux donc soustraire 16px à une valeur donnée en %?
Une alternative qui devrait fonctionner. Tu utilises calc() pour faire ta différence:

Code:

---

1 2 3 4 5

input{ padding: 8px; width: calc(100% - 18px); }

---

16+2 car 1px de border-width de chaque côté.

ça devrait le faire... (l'espace est indispensable autour du signe moins de l'opération sinon, ça ne fonctionne pas)

Citation:

---

Envoyé par psychadelic

Code:

---

1 2 3 4 5

input{ width:100%; padding:0 10px; box-sizing: border-box; }

---

mais c'est sans doute la pire manière de procéder
parce qu'il faut mieux utiliser un reset css, même s'il est minimal

---

J'aurais conseillé la même chose, pourquoi dis-tu que c'est la pire manière de procéder ?
Sinon le reset css je l'utiliserais en complément, mais je ne vois pas comment cela pourrait-être une alternative à box-sizing dans ce cas de figure ?

Y'a-t-il des problèmes/bug avec box-sizing: border-box; ?

Il n'y a aucun problème avec l'instruction css = box-sizing: border-box;relis moi, j'ai écris :

Citation:

---

c'est sans doute la pire manière de procéder

---

ou, si tu préfères, c'est la manière de procéder qui pose problème.

par défaut le Box-sizing est réglé en content-box; ce qui signifie que le reste de tout ce qu'il mettra sur la page utilisera un système de sizing opposé, et que forcément en construisant son interface, il va placer différents box-sizing sur d'autres éléments et son code css / html finira par devenir un plat de spaghettis ingérable (et indigeste).

Donc mon conseil, utiliser au moins un reset css et s'y tenir, sinon un framework css minimal (moins de 10k). (cad ne pas bricoler sa mise en page).

En général ils utilisent tous un box-sizing à border-box (rejeter ceux qui ne le font pas).

Ah ok, néanmoins ne je pense pas que c'était évident pour tout le monde, un commentaire placé juste en dessous d'un code est censé se rapporter au code que l'on vient de montrer surtout quand la phrase commence par "mais". En tous cas merci d'avoir répondu, cela enlève toute ambiguïté.