Ajuste de ancho de relleno/margen incluido?

Question

Básicamente tengo un div que quiero al 100% de ancho. Sin embargo, también quiero que tenga algo de relleno. Pero cuando agrego el relleno, se agrega el ancho, lo que significa que mi div ahora se sale de la pantalla y hay una barra de desplazamiento horizontal.

Por lo general, lo compenso simplemente haciendo que el div sea un porcentaje menor (como el 95%, o el 90%).

Me preguntaba si hay formas más elegantes de manejar esta situación?

Answer 1

Prueba a poner el relleno y el 5% y el ancho a 90% (100-5x2)

Answer 2

Eche un vistazo a box-sizing.

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

Por defecto, el ancho de un elemento se calcula con respecto a su cuadro de contenido. Por lo tanto, se agrega un relleno aplicado al ancho. Si cambia el modelo de caja a border-box, el relleno se incluye en el ancho. Para compatibilidad echar un vistazo a caniuse.com

Answer 3

Hay cuatro cosas importantes implican en CSS modelo de caja. i) Margen ii) Border iii) Padding iv) contenido

Cuando establecimos anchura entonces estamos estableciendo esencialmente ancho de contenido para la adición de relleno significa aumento global de anchura.

Consulte los siguientes recursos y podrá conocerlo todo.

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

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

Y se puede manejar esta situación utilizando% o incluso si se calcula correctamente px de ancho, si también ha configurado frontera o incluso quieren crear márgenes.

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

Answer 4

Por defecto es un div width: auto la que (suponiendo posicionamiento normal, la pantalla y la falta de flotación) hará que se llene el contenedor (que representan los márgenes, el relleno y el borde).

Simplemente déjalo en width: auto en lugar de establecer un ancho explícito o porcentual.