Skip to main content
se eliminaron 8 caracteres en el cuerpo
Origen Enlace
IvanS95
  • 1.2k
  • 8
  • 12

Aplica la propiedad box-sizing: border-box a tus elementos; esto hace que el padding, margin, border, etc se tomen en cuenta en el calculo del tamaño total del elemento; de modo que no 'suman' al tamaño original.

Por lo general es recomendable aplicar esta propiedad a todos los elementos de tu documento; asi puedes mantener cierto nivel de consistencia entre todos al momento de tratar con margin, padding, etc; puesto que no tienes que preocuparte porque el elemento altere demasiado su comportamiento.

Mas detalles aca: Box Sizing


* {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style type="text/css">
    .w-10 {
      width: 100%;
    }
    
    .w-9 {
      width: 90%;
    }
    
    .w-8 {
      width: 80%;
    }
    
    .centered {
      margin-left: auto;
      margin-right: auto;
    }
    
    .input {
      display: block;
      /** el problema es el padding **/
      padding: 1em;
    }
  </style>
</head>

<body>
  <div class="w-8 centered bg-grey" style="background: grey; margin-top: 5%; padding-bottom: 1em">
    <input type="text" class="input centered w-8" placeholder="Elemento con padding..." style="margin-bottom: 1em;">

    <div class="centered w-8" style="background: white">
      <p>Ancho esperado...</p>
    </div>
  </div>
</body>

</html>

Aplica la propiedad box-sizing: border-box a tus elementos; esto hace que el padding, margin, border, etc se tomen en cuenta en el calculo del tamaño total del elemento; de modo que no 'suman' al tamaño original.

Por lo general es recomendable aplicar esta propiedad a todos los elementos de tu documento; asi puedes mantener cierto nivel de consistencia entre todos al momento de tratar con margin, padding, etc; puesto que no tienes que preocuparte porque el elemento altere demasiado su comportamiento.

Mas detalles aca: Box Sizing


* {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style type="text/css">
    .w-10 {
      width: 100%;
    }
    
    .w-9 {
      width: 90%;
    }
    
    .w-8 {
      width: 80%;
    }
    
    .centered {
      margin-left: auto;
      margin-right: auto;
    }
    
    .input {
      display: block;
      /** el problema es el padding **/
      padding: 1em;
    }
  </style>
</head>

<body>
  <div class="w-8 centered bg-grey" style="background: grey; margin-top: 5%; padding-bottom: 1em">
    <input type="text" class="input centered w-8" placeholder="Elemento con padding..." style="margin-bottom: 1em;">

    <div class="centered w-8" style="background: white">
      <p>Ancho esperado...</p>
    </div>
  </div>
</body>

</html>

Aplica la propiedad box-sizing: border-box a tus elementos; esto hace que el padding, border, etc se tomen en cuenta en el calculo del tamaño total del elemento; de modo que no 'suman' al tamaño original.

Por lo general es recomendable aplicar esta propiedad a todos los elementos de tu documento; asi puedes mantener cierto nivel de consistencia entre todos al momento de tratar con margin, padding, etc; puesto que no tienes que preocuparte porque el elemento altere demasiado su comportamiento.

Mas detalles aca: Box Sizing


* {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style type="text/css">
    .w-10 {
      width: 100%;
    }
    
    .w-9 {
      width: 90%;
    }
    
    .w-8 {
      width: 80%;
    }
    
    .centered {
      margin-left: auto;
      margin-right: auto;
    }
    
    .input {
      display: block;
      /** el problema es el padding **/
      padding: 1em;
    }
  </style>
</head>

<body>
  <div class="w-8 centered bg-grey" style="background: grey; margin-top: 5%; padding-bottom: 1em">
    <input type="text" class="input centered w-8" placeholder="Elemento con padding..." style="margin-bottom: 1em;">

    <div class="centered w-8" style="background: white">
      <p>Ancho esperado...</p>
    </div>
  </div>
</body>

</html>

se añadieron 96 caracteres en el cuerpo
Origen Enlace
IvanS95
  • 1.2k
  • 8
  • 12

Aplica la propiedad box-sizing: border-box a tus elementos; esto hace que el padding, margin, border, etc se tomen en cuenta en el calculo del tamaño total del elemento; de modo que no 'suman' al tamaño original.

Por lo general es recomendable aplicar esta propiedad a todos los elementos de tu documento; asi puedes mantener cierto nivel de consistencia entre todos al momento de tratar con margin, padding, etc; puesto que no tienes que preocuparte porque el elemento altere demasiado su comportamiento.

Mas detalles aca: Box Sizing


* {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style type="text/css">
    .w-10 {
      width: 100%;
    }
    
    .w-9 {
      width: 90%;
    }
    
    .w-8 {
      width: 80%;
    }
    
    .centered {
      margin-left: auto;
      margin-right: auto;
    }
    
    .input {
      display: block;
      /** el problema es el padding **/
      padding: 1em;
    }
  </style>
</head>

<body>
  <div class="w-8 centered bg-grey" style="background: grey; margin-top: 5%; padding-bottom: 1em">
    <input type="text" class="input centered w-8" placeholder="Elemento con padding..." style="margin-bottom: 1em;">

    <div class="centered w-8" style="background: white">
      <p>Ancho esperado...</p>
    </div>
  </div>
</body>

</html>

Aplica la propiedad box-sizing: border-box a tus elementos; esto hace que el padding, margin, border, etc se tomen en cuenta en el calculo del tamaño total del elemento; de modo que no 'suman' al tamaño original.

Por lo general es recomendable aplicar esta propiedad a todos los elementos de tu documento; asi puedes mantener cierto nivel de consistencia entre todos al momento de tratar con margin, padding, etc; puesto que no tienes que preocuparte porque el elemento altere demasiado su comportamiento.

* {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style type="text/css">
    .w-10 {
      width: 100%;
    }
    
    .w-9 {
      width: 90%;
    }
    
    .w-8 {
      width: 80%;
    }
    
    .centered {
      margin-left: auto;
      margin-right: auto;
    }
    
    .input {
      display: block;
      /** el problema es el padding **/
      padding: 1em;
    }
  </style>
</head>

<body>
  <div class="w-8 centered bg-grey" style="background: grey; margin-top: 5%; padding-bottom: 1em">
    <input type="text" class="input centered w-8" placeholder="Elemento con padding..." style="margin-bottom: 1em;">

    <div class="centered w-8" style="background: white">
      <p>Ancho esperado...</p>
    </div>
  </div>
</body>

</html>

Aplica la propiedad box-sizing: border-box a tus elementos; esto hace que el padding, margin, border, etc se tomen en cuenta en el calculo del tamaño total del elemento; de modo que no 'suman' al tamaño original.

Por lo general es recomendable aplicar esta propiedad a todos los elementos de tu documento; asi puedes mantener cierto nivel de consistencia entre todos al momento de tratar con margin, padding, etc; puesto que no tienes que preocuparte porque el elemento altere demasiado su comportamiento.

Mas detalles aca: Box Sizing


* {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style type="text/css">
    .w-10 {
      width: 100%;
    }
    
    .w-9 {
      width: 90%;
    }
    
    .w-8 {
      width: 80%;
    }
    
    .centered {
      margin-left: auto;
      margin-right: auto;
    }
    
    .input {
      display: block;
      /** el problema es el padding **/
      padding: 1em;
    }
  </style>
</head>

<body>
  <div class="w-8 centered bg-grey" style="background: grey; margin-top: 5%; padding-bottom: 1em">
    <input type="text" class="input centered w-8" placeholder="Elemento con padding..." style="margin-bottom: 1em;">

    <div class="centered w-8" style="background: white">
      <p>Ancho esperado...</p>
    </div>
  </div>
</body>

</html>

Origen Enlace
IvanS95
  • 1.2k
  • 8
  • 12

Aplica la propiedad box-sizing: border-box a tus elementos; esto hace que el padding, margin, border, etc se tomen en cuenta en el calculo del tamaño total del elemento; de modo que no 'suman' al tamaño original.

Por lo general es recomendable aplicar esta propiedad a todos los elementos de tu documento; asi puedes mantener cierto nivel de consistencia entre todos al momento de tratar con margin, padding, etc; puesto que no tienes que preocuparte porque el elemento altere demasiado su comportamiento.

* {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style type="text/css">
    .w-10 {
      width: 100%;
    }
    
    .w-9 {
      width: 90%;
    }
    
    .w-8 {
      width: 80%;
    }
    
    .centered {
      margin-left: auto;
      margin-right: auto;
    }
    
    .input {
      display: block;
      /** el problema es el padding **/
      padding: 1em;
    }
  </style>
</head>

<body>
  <div class="w-8 centered bg-grey" style="background: grey; margin-top: 5%; padding-bottom: 1em">
    <input type="text" class="input centered w-8" placeholder="Elemento con padding..." style="margin-bottom: 1em;">

    <div class="centered w-8" style="background: white">
      <p>Ancho esperado...</p>
    </div>
  </div>
</body>

</html>