Pregunta ¿Cómo cambiar un relleno DIV sin afectar el ancho / alto?


Tengo un div para el que quiero especificar un ancho y alto FIJO, y también un relleno que se puede cambiar sin disminuir el ancho / alto del DIV original o aumentarlo, ¿hay algún truco de CSS para eso o una alternativa que use relleno?


73
2018-02-08 23:06


origen


Respuestas:


La solución es envolver su div acolchado, con div externo de ancho fijo

HTML

<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

CSS

.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}

63
2018-02-08 23:14



Declara esto en tu CSS y deberías ser bueno:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

Esta solución se puede implementar sin usar envolturas adicionales


138
2017-07-26 16:31



Parece que estás buscando simular el modelo de caja IE6. Podría usar la propiedad CSS 3 tamaño de caja: border-box lograr esto. Esto es compatible con IE8, pero para Firefox necesitarás usar -moz-box-sizing y para Safari / Chrome, use -webkit-box-sizing.

IE6 ya calcula la altura incorrecta, por lo que eres bueno en ese navegador, pero no estoy seguro de IE7, creo que calculará la altura de la misma manera.


15
2018-02-08 23:18



prueba este truco

div{
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;    
 box-sizing: border-box;      
}

esto forzará al navegador a calcular el ancho de acuerdo con el ancho "externo" del div, significa que el relleno se restará del ancho.


5
2018-03-13 14:44



Para lograr un resultado cruzado consistente en el resultado, generalmente agregaría otro div dentro de div y darle ese ancho no explícito, y un margin. los margin simulará padding para el div externo.


4
2018-02-08 23:07