Salta al contenuto ID

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)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Torna su