Mi spiegate perchè i campi input non prendono le stesse dimensioni del del contenitore padre?
Cioè mi spiego se gli do un "width: 100%" e sempre più lungo del contenitore padre
Mi spiegate perchè i campi input non prendono le stesse dimensioni del del contenitore padre?
Cioè mi spiego se gli do un "width: 100%" e sempre più lungo del contenitore padre
Dipende dal box-sizing che è una caratteristica del box model.
La spiegazione è che nel valore della proprietà width (di qualsiasi elemento e anche per la proprietà height) di norma non è considerato l'ingombro creato dalle proprietà border e/o padding. L'elemento input dovrebbe avere di default un valore impostato per entrambe queste proprietà, per cui width:100% è applicato considerando la larghezza (del padre) al netto di queste due proprietà (sia del padre che del figlio).
La soluzione è quella di applicare, sull'input, la proprietà box-sizing:border-box che risolve il problema.
Nota che ultimamente su alcuni framework (vedi bootstrap) tale proprietà viene ridefinita in questo modo per ottenere un migliore box model di base. Generalmente puoi trovare una roba del genere:
codice:* { box-sizing:border-box;}
Ultima modifica di KillerWorm; 12-03-2018 a 12:15
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum