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

93

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

css html

— Ryan
fuente

72

La solución es envolver su div acolchado , con div exterior 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;
}

— Juraj Blahunka
fuente

Solo quiero aclarar, no estoy seguro, pero esto solo funcionaría para el relleno horizontal, ¿verdad? Como altura: auto no llena el padre como ancho: auto lo hace.

— Jonathan

200

Declare esto en su CSS y debería ser bueno:

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

Esta solución se puede implementar sin utilizar envoltorios adicionales.

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

— anuncios web
fuente

funciona como un encanto soy novato solo busca esta propiedad y funciona Great Man .....

— nida

1

¿Hay algún efecto secundario que deba tener en cuenta al usarlo?

— Radi

16

Esta solución es mejor que la aceptada, y es seguro no usar más prefijos: shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork Me ahorraste una gran cantidad de tiempo. Gracias.

— Hardik Chaudhary

17

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

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

— wsanville
fuente

css3 es todavía muy nuevo como el iPad :)

— Ryan

10

prueba este truco

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

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

— KA
fuente

5

esto es lo mismo que la respuesta de @ adswebwork, ¿verdad? Aprecio la explicación de cómo funciona, pero probablemente sea mejor como comentario

— craq

1

¿Por qué publicar una respuesta idéntica?

— Andrew

4

Para lograr un resultado coherente en varios navegadores, normalmente agregaría otro divdentro de divy no le daría un ancho explícito, y un margin. El marginsimulará paddingpara el div externo.

— Pekka
fuente