Campo input con larghezza 100% più grande del proprio contenitore
Nel model box possiamo decidere come trattare padding, margin e border negli elementi.
Se un elemento ha width 100% e anche un padding, la larghezza totale sarà la somma, quindi il campo input sarà più grande dell’elemento contenitore. Per risolvere questo problema dobbiamo impostare la proprietà box-sizing a border-box, normalmente facciamo sempre questa convenzione per comodità nello sviluppo: le proprietà di altezza e larghezza di tutti gli elementi includono padding e border, ma non margin.
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Se aggiungiamo margin il campo input continua a uscire dal proprio contenitore, la proprietà box-sizing è inutile e non funzionano nemmeno le correzioni con min-width e max-width a 100%.
Per risolvere questo problema si può usare la funzione calc() per ridurre la larghezza dell’ammontare del margine. Questo è un esempio:
input { margin: 0 20px; width: calc(100% - 40px); }
Se non ti piace questa soluzione allora evita il margin nel campo input, usa gli stili del suo contenitore.
Comments (0)