html - que - div pantalla completa

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

Question

Estoy creando un sitio con DIV s. 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 propiedad padding-left , el ancho del DIV cambia a 220px, y quiero que permanezca en 200px.

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

¿Como puedo solucionar este problema?

Answer 1

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

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

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

No, newdiv se mantendrá 200px de ancho.

Answer 2

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 por debajo de la versión 8.

Answer 3

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

Retire el relleno de newdiv.

La página del modelo W3 Box tiene buena información.

Answer 4

Prueba esto

box-sizing: border-box;

Answer 5

Si desea sangrar el texto dentro de un div sin cambiar el tamaño del div, use la text-indent CSS text-indent lugar del 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

simplemente agregue box-sizing: border-box;

Answer 7

solo tiene que cambiar el ancho de su 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 en un estado normal y no distorsionada con un ancho extra en él su texto todo desordenado.