Come posso evitare che la proprietà padding cambi la larghezza o l'altezza nei CSS?

227

Sto creando un sito con DIVs. Tutto funziona, tranne quando creo un DIV. Li creo così (esempio):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

Quando aggiungo la padding-leftproprietà, la larghezza delle DIVmodifiche diventa 220px e voglio che rimanga a 200px.

Diciamo che ne creo un altro DIVchiamato anotherdivesattamente lo stesso di newdiv, e lo metto dentro newdivma newdivnon ha imbottitura e anotherdivha padding-left: 20px. Ottengo la stessa cosa, newdivla larghezza sarà di 220 px.

Come posso risolvere questo problema?

html css padding

— Sam
fonte

3

Sono triste da dire, ma mi piace il modo in cui IE gestisce questo ... Ha molto più senso per me ...

— Nicu Surdu,

390

Aggiungi proprietà:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Nota: questo non funzionerà in Internet Explorer sotto la versione 8.

— Pramod
fonte

14

Questa è un'ottima soluzione per i bordi, ma come può aiutare l'imbottitura?

— Kato,

6

Questa è pura magia! - Risolve il modello di scatola che tutti conosciamo e odiamo! cioè lo fa funzionare nel modo in cui l'intuizione suggerisce che dovrebbe - piuttosto che le specifiche - ma per quanto ne so non rompe nessuna delle specifiche: D Questo articolo lo chiarisce bene ... stackoverflow.com/questions/779434/…

— technicalbloke

2

@technicalbloke Il tuo link torna a questa domanda.

— mhenry1384,

11

Whoops sì, copia e incolla il cazzo. Questo è il link che intendevo condividere ... paulirish.com/2012/box-sizing-border-box-ftw

— technicalbloke

1

Molti di voi dovrebbero considerare la larghezza: trucco automatico di seguito. Funziona su tutti i browser, meno codice, ecc.

— Ryan Shillington,

39

Metti un div nel tuo newdiv con width: autoemargin-left: 20px

Rimuovere l'imbottitura da newdiv.

La pagina del modello W3 Box ha buone informazioni.

— rvarcher
fonte

1

Perché usare due div quando puoi usarne uno?

— Aaron Franke,

26

Prova questo

box-sizing: border-box;

— Ajay Gupta
fonte

11

Se desideri rientrare il testo all'interno di un div senza modificarne le dimensioni, utilizza il CSS text-indentanziché padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

Espandi frammento

— mvndaai
fonte

1

Questa è l'unica soluzione che ho trovato funzionante per il mio div a larghezza fissa. il dimensionamento delle scatole non ha impedito che l'imbottitura abbia un impatto sulla larghezza, sfortunatamente, quindi grazie a una tonnellata per aver sottolineato questa fantastica piccola proprietà.

— Stevo,

8

aggiungi semplicemente box-sizing: border-box;

— Felix Wong
fonte

12

Questo è esattamente lo stesso di quello che altre risposte già dicono qui.

— Neil Lunn,

1

quando aggiungo la proprietà padding-left, la larghezza del DIV cambia a 220px

Sì, è esattamente secondo gli standard. È così che dovrebbe funzionare.

Diciamo che creo un altro DIV chiamato anotherdiv esattamente lo stesso di newdiv, e lo inserisco all'interno di newdiv ma newdiv non ha riempimento e un altro div ha il riempimento a sinistra: 20px. Ottengo la stessa cosa, la larghezza di newdiv sarà 220px;

No, newdiv rimarrà largo 200 px.

— Guffa
fonte

2

Guffa, non è così che gli standard dovrebbero funzionare. L'imbottitura non dovrebbe assolutamente influire sulle dimensioni dell'elemento a cui viene applicata. Con il massimo rispetto, è possibile che tu confonda "imbottitura" con "margine"?

— da5id,

1

Sì, l'imbottitura dovrebbe sicuramente influenzare le dimensioni dell'elemento. Penso che tu sia confuso ... come proponi che il margine influisca sulle dimensioni dell'elemento?

— Guffa,

In realtà, sai che penso che entrambi abbiamo ragione in un certo senso. Sono così abituato a far fronte agli effetti che avevo completamente dimenticato lo standard. Ho trovato una buona spiegazione qui quirksmode.org/css/box.html

— da5id

Quindi, mi scuso con l'onorevole Guffa. Ma per scopi pratici (che è tutto ciò di cui stiamo parlando) il mio consiglio è ancora buono, no?

— da5id,

Bene, hai ragione fino a quando c'è un bug del modello a scatola, ma non si applica a questa domanda ... :)

— Guffa,

-1

basta cambiare la larghezza del div in 160px se si ha un'imbottitura di 20px aggiunge 40px in più alla larghezza del div quindi è necessario sottrarre 40px dalla larghezza per mantenere il div in modo normale e non distorto con una larghezza extra su di esso e il tuo testo è tutto incasinato.

— sean
fonte

2

Questa è la stessa della risposta data da @rvarcher.

— 8bitjunkie,