Impostazione larghezza padding/margin-inclusive?

Question

Fondamentalmente ho un div che voglio al 100% della larghezza. Tuttavia, voglio anche che abbia un po 'di padding. Ma quando aggiungo il padding, viene aggiunta la larghezza, il che significa che il mio div ora va fuori campo e c'è una barra di scorrimento orizzontale.

In genere, compenso semplicemente rendendo il div una percentuale più bassa (come 95% o 90%).

Mi chiedevo se ci sono modi più eleganti per gestire questa situazione?

Answer 1

Prova a impostare l'imbottitura al 5% e la larghezza al 90% (100-5x2)

Answer 2

Dai un'occhiata a box-sizing.

.example { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:  border-box; 
} 

Per impostazione predefinita, la larghezza di un elemento viene calcolata in relazione alla relativa casella di contenuto. Quindi un riempimento applicato viene aggiunto alla larghezza. Se si modifica il modello di casella su border-box, il riempimento è incluso nella larghezza. Per la compatibilità dare un'occhiata a caniuse.com

Answer 3

Ci sono quattro cose importanti coinvolgono in CSS Box Model. i) Margine ii) Border iii) Padding iv) contenuto

Quando abbiamo larghezza allora stiamo essenzialmente impostazione della larghezza di contenuto in modo imbottitura aggiungendo significa aumento complessivo di larghezza.

Si prega di consultare le seguenti risorse e conoscere tutto.

http://www.w3.org/TR/CSS2/box.html

http://css-tricks.com/the-css-box-model/

E si può gestire questa situazione utilizzando% o anche se si calcola la larghezza px correttamente se hai anche impostare frontiera o anche voler impostare i margini.

element{ 
    width: 96%; 
    padding: 0 2%; 
} 

Answer 4

Per default un div è width: auto che (supponendo posizionamento normale, la visualizzazione e la mancanza di galleggiamento) causerà che riempia suo contenitore (pari margini, padding e il bordo).

Lasciare semplicemente a width: auto invece di impostare una larghezza esplicita o percentuale.