0

Tengo unos selectores para dar un ancho a los elementos de la página basados en porcentaje, el problema es que al dar un padding (que quiero que se mantenga fijo) a un determinado elemento, por ejemplo un input, esto afecta a su ancho, cosa que quiero evitar. Es decir que si a un elemento de asigno un selector para que tenga un ancho del 80% del total de su contenedor, no quiero que sea más ancho cuando le asigno un padding determinado. ¿Se puede controlar esto con CSS?


Imagen: introducir la descripción de la imagen aquí

El código es una simplificación del problema:

<!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>

2 respuestas 2

2

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>

1
  • 1
    Wow. Siempre meto un pequeño reset para los estilos con eso, y margin / padding a 0. Se me paso...
    – Orici
    Commented el 2 abr. 2019 a las 13:51
0

Solo debes agregar: ".w-8" (tu class) y luego el "input" que afecta a todos los input con la clase "w-8", y darle un padding de 0 y hacerlo "importante" con "!important"

    <!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%; }
            .w-8 input { padding:0!important; } /** linea agregada **/
    
            .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>

1
  • Sugeriría siempre evitar !importat a menos que no haya niguna otra solucion viable; el uso de !important lamentablemente puede ser problematico y es de cierta forma un hack para que una propiedad funcione; es mejor basarse en Especificidad
    – IvanS95
    Commented el 1 abr. 2019 a las 23:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.