¿Cómo agregar relleno o borde a un DIV y mantener el ancho y la altura?

Question

¿Hay alguna manera de mantener un ancho/alto establecido para un DIV y rellenar el contenido sin que crezca el DIV? Vea el ejemplo a continuación. Quiero que todas las cajas sean exactamente 140x140.

HTML:

<div class="box1">Howdy.</div> 
<div class="box2">Howdy.</div> 
<div class="box3">Howdy.</div>​ 

CSS:

.box1 { 
    width: 140px; 
    height: 140px; 
    background: #f66; 
} 

.box2 { 
    width: 140px; 
    height: 140px; 
    background: #66f; 
    padding: 1em; 
} 

.box3 { 
    width: 140px; 
    height: 140px; 
    background: #6f6; 
    border: 1em solid #000; 
} 

violín: http://jsfiddle.net/Wrc5S/

Answer 1

sí se puede utilizar

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

para cambiar el modelo de caja para que las fronteras y el relleno interna l de su ancho/alto, pero los márgenes todavía se agregan.

y su actualización Fiddle

más información aquí css tricks

Answer 2

Si la solución a su problema es una caja de tamaño: Frontera de la caja; (http://css-tricks.com/box-sizing/, http://paulirish.com/wp-content/uploads/2011/gplus-boxsizing.html) (funciona en IE8 + y todos los navegadores modernos)

Answer 3

Dependiendo de qué navegadores necesite admitir, podría cambiar el atributo de tamaño de caja en estos DIV para que sea border-box. Eso le permitirá establecer una altura y un ancho en cada cuadro, sin que el relleno o los bordes afecten las dimensiones que configure.

Algunas personas han sugerido configurarlo globalmente para todos los elementos en un restablecimiento porque facilita muchísimo el estilo (y posiblemente sea un modelo de tamaño de caja mejor que el predeterminado). Para ello, se usaría algo como:

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

Más información, incluyendo el apoyo del navegador y algunas advertencias generales se pueden encontrar aquí: http://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 4

Sí simplemente restar el doble de relleno o borde de la altura y la anchura (en otras palabras, restar el relleno o borde de cada lado de la div): ejemplo

.box1 
{ 
    width: 140px; 
    height: 140px; 
    background: #f66; 
} 

.box2 
{ 
    width: 130px; 
    height: 130px; 
    background: #66f; 
    padding: 5px; 
} 

.box3 
{ 
    width: 130px; 
    height: 130px; 
    background: #6f6; 
    border: 5px solid #000; 
} 

violín: http://jsfiddle.net/N6BYH/

Answer 5

El método más limpio sería probablemente para anidar <div> etiquetas y en los actuales <div> etiquetas, y aplicar el relleno a ellos:

<div class="box" id="box1"><div>Howdy.</div></div> 
<div class="box" id="box2"><div>Howdy.</div></div> 
<div class="box" id="box3"><div>Howdy.</div></div>​ 

CSS:

.div { /* ... */ } 
.div > div { padding: 1em; } /* Apply to all inner divs */ 
#box2 > div { padding: 1em; } /* Only apply to the inner div in #box2 */