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

Question

Estoy creando un sitio con DIV s. Todo funciona, excepto cuando creo un DIV. Las creo así (ejemplo):

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

Cuando agrego la propiedad padding-left, la anchura de las DIV cambios a 220px, y quiero que se quede en 200 px.

Digamos que crear otra DIV llamado anotherdiv exactamente el mismo que newdiv, y lo puso dentro de newdiv pero newdiv no tiene relleno y anotherdiv tiene padding-left: 20px. Obtengo lo mismo, el ancho de newdiv será de 220px.

¿Cómo puedo solucionar este problema?

Answer 1

Deja un div en su newdiv con width: auto y margin-left: 20px

Retire el relleno de newdiv.

The W3 Box model page has good info.

Answer 2

cuando agrego la propiedad padding-left, la anchura de los cambios a DIV 220px

Sí, eso es exactamente de acuerdo con las normas. Así es como se supone que debe funcionar.

Digamos que crear otro DIV nombrado anotherdiv exactamente el mismo que newdiv, y ponerlo dentro de newdiv pero newdiv no tiene relleno y anotherdiv tiene padding-left: 20px. Obtengo la misma cosa , el ancho de newdiv será 220px;

No, newdiv se mantendrá 200px de ancho.

Answer 3

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

Answer 4

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

Answer 5

Si desea aplicar la sangría de texto dentro de un div sin cambiar el tamaño del uso del div el CSS text-indent en vez de padding-left.

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

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

 
<br> 
 

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

Answer 6

probar este

box-sizing: border-box; 

Answer 7

simplemente añadir box-sizing: border-box;