¿Relleno agrega a div ancho/alto?

<html> 
<head> 
<style> 
    * { margin:0; border:0; padding:0; } 
    div { height:500px; } 
    #container { width:1000px; background-color:#000; } 
    #column-one { float:left; padding:10px; width:500px; background-color:#234; } 
    #column-two { float:left; padding:10px; width:500px; background-color:#345; } 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="column-one"> 
    </div> 
    <div id="column-two"> 
    </div> 
</div> 
</body> 
</html>

Counterintuitive indeed.¿Relleno agrega a div ancho/alto?

Fuente

2011-02-02 Sid Bayer

err ¿hay alguna pregunta? Y qué navegador (IE es famoso por esto, tiene un modelo de caja "reventado"). – Sean

todos los navegadores agregan relleno, margen y bordes al elemento ancho/alto – jennyfofenny

Esta es una "característica" muy conocida. ¿Cuál es tu pregunta? – Leigh

El content-box model indica que el relleno y los bordes no cuentan en el width que configura para un cuadro. Entonces agregan a su width.

navegadores modernos soportan CSS3 de box-sizing: border-box para causar width para representar la anchura total del contenido, el relleno y los bordes (el valor predeterminado es, por supuesto, content-box, lo que provocó el comportamiento anterior).

Fuente

2011-02-02 21:16:04 BoltClock

Sé que esto es viejo, y un tema que está muerto a golpes, pero * ¿por qué el modelo de cuadro de contenido no incluye relleno? Sería * mucho * más fácil crear diseños precisos si pudiera controlar específicamente el tamaño de mis divs y aún tener relleno en ellos. Además, no parece tener suerte en IE10 o Chrome con el atributo "tamaño de caja". Lo siento si sueno frustrado. No es tu culpa. –

@Mike U: Eso es porque el contenido no puede aparecer en el área de relleno por definición. Firefox tiene un valor experimental de 'recuadro-caja', que se menciona en la especificación pero está en riesgo y no se implementa en ningún otro lado. Debe haber algo más en juego si no puede lograr que el tamaño de la caja funcione en IE10 o Chrome, porque hasta donde yo sé, ambos lo admiten sin prearranque. – BoltClock

Entiendo * cómo * funciona el modelo de caja. Principalmente solo curiosidad * por qué * funciona de esa manera. Parece tan poco intuitivo e ilógico. He obtenido el atributo de modelo de caja para trabajar desde mi comentario anterior. Parece que no puedes simplemente aplicarlo a clases específicas. La única manera de hacerlo funcionar fue aplicarlo a "*". La forma clásica simplemente parece ilógica. Si quiero que algo sea el 40% de la pantalla y tenga un relleno de 4px, es imposible hacer un diseño adecuado con el modelo clásico. solo una queja, supongo. Al menos sé cómo evitarlo, ahora. –

El ancho es el ancho que puede llenar su contenido, no el ancho del cuadro delimitado por su borde.

Fuente

2011-02-02 21:10:42 greg0ire

Quizás entendí mal, pero creo que puede resolver su problema utilizando width: auto para el div en lugar de width: 100%; PD: Sé que la publicación es antigua, pero tal vez todavía pueda ser útil ...

Fuente

2015-07-24 23:15:58

Respuesta

Cuestiones relacionadas