¿Cómo evito que la propiedad de relleno cambie el ancho o la altura en CSS?

227

Estoy creando un sitio con DIVs. Todo está funcionando, excepto cuando creo un DIV. Los creo así (ejemplo):

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

Cuando agrego la padding-leftpropiedad, el ancho de los DIVcambios a 220px, y quiero que permanezca en 200px.

Digamos que creo otro DIVnombre anotherdivexactamente igual que newdiv, y lo puse dentro de newdivpero newdivno tiene relleno y anotherdivtiene padding-left: 20px. Me sale lo mismo, newdivel ancho será de 220px.

¿Como puedo solucionar este problema?

html css padding Sam
fuente
3
Lamento decirlo, pero me gusta cómo IE maneja esto ... Tiene mucho más sentido para mí ...
Nicu Surdu

Respuestas:

390

Añadir propiedad: 

-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: Esto no funcionará en Internet Explorer debajo de la versión 8.

Pramod
fuente
14
Esta es una gran solución para los bordes, pero ¿cómo ayuda esto para el relleno?
Kato
66
¡Esto es pura magia! - ¡Corrige el modelo de caja que todos conocemos y odiamos! es decir, hace que funcione de la manera que la intuición sugiere que debería, en lugar de las especificaciones, pero que yo sepa, tampoco rompe ninguna especificación: D Este artículo lo aclara bien ... stackoverflow.com/questions/779434/…
technicalbloke
2
@technicalbloke Su enlace vuelve a esta pregunta.
mhenry1384
11
Vaya sí, copia y pega la polla. Este es el enlace que quería compartir ... paulirish.com/2012/box-sizing-border-box-ftw
technicalbloke
1
Muchos de ustedes deberían considerar el ancho: truco automático a continuación. Funciona en navegadores, menos código, etc.
Ryan Shillington
26

Prueba esto

box-sizing: border-box;
Ajay Gupta
fuente
11

Si desea sangrar texto dentro de un div sin cambiar el tamaño del div, use el CSS en text-indentlugar de padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}
<div class="border">
  Non indented
</div>

<br>

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

mvndaai
fuente
1
Esta es la única solución que encontré trabajada para mi div de ancho fijo. desafortunadamente, el tamaño de la caja no impidió que el relleno impactara el ancho, así que gracias una tonelada por señalar esta pequeña propiedad increíble.
Stevo
8

simplemente agregue box-sizing: border-box;

Felix Wong
fuente
12
Esto es simplemente exactamente lo que otras respuestas ya dicen aquí.
Neil Lunn
1

cuando agrego la propiedad padding-left, el ancho del DIV cambia a 220px

Sí, eso es exactamente de acuerdo con los estándares. Así es como se supone que debe funcionar.

Digamos que creo otro DIV llamado anotherdiv exactamente igual que newdiv, y lo puse dentro de newdiv pero newdiv no tiene relleno y otrodiv tiene relleno-izquierda: 20px. Me sale lo mismo, el ancho de newdiv será 220px;

No, newdiv seguirá siendo de 200 píxeles de ancho.

Guffa
fuente
2
Guffa, no es así como se supone que funcionan los estándares. Definitivamente, se supone que el relleno no afecta las dimensiones del elemento al que se aplica. Con el mayor respeto, ¿es posible que esté confundiendo 'relleno' con 'margen'?
da5id
1
Sí, definitivamente se supone que el relleno afecta las dimensiones del elemento. Creo que eres tú quien está confundido ... ¿cómo propones que el margen afectaría las dimensiones del elemento?
Guffa el
En realidad, sabes que creo que ambos estamos en lo cierto. Estoy tan acostumbrado a hacer frente a los efectos que me había olvidado por completo del estándar. Encontré una buena explicación aquí quirksmode.org/css/box.html
da5id
Entonces, mis disculpas, señor Guffa. Pero para fines prácticos (que es de lo que estamos hablando) mi consejo sigue siendo bueno, ¿no?
da5id
Bueno, tienes razón en cuanto a que hay un error de modelo de caja, pero no se aplica a esta pregunta ... :)
Guffa
-1

simplemente cambie su ancho de div a 160px si tiene un relleno de 20px, agrega 40px extra al ancho de su div, por lo que debe restar 40px del ancho para mantener su div con un aspecto normal y no distorsionado con ancho adicional y Tu texto está desordenado.

sean
fuente
2
Esto es lo mismo que la respuesta dada por @rvarcher.
8bitjunkie