CSS ¿el ancho incluye el relleno?

146

Parece que en IE, el ancho incluye el tamaño del relleno. mientras que en FF, el ancho no. ¿Cómo puedo hacer que ambos se comporten igual?

Gracias.

css

— Jake
fuente

Probablemente necesite activar el modo compatible con los estándares. Sin ver un código, sin embargo, no puedo darle más orientación que eso.

— Jeff Hubbard

307

IE solía usar el modelo de caja "border-box" más conveniente pero no estándar . En este modelo, el ancho de un elemento incluye el relleno y los bordes. Por ejemplo:
#foo { width: 10em; padding: 2em; border: 1em; }
sería 10emancho.
Por el contrario, todos los navegadores temerosos de los estándares adoptan por defecto el modelo de cuadro " caja de contenido" . En este modelo, el ancho de un elemento no incluye relleno ni bordes. Por ejemplo: en
#foo { width: 10em; padding: 2em; border: 1em; }
realidad será 16emancho: 10em+ 2emrelleno para cada lado, + 1emborde para cada borde.

Si usa una versión moderna de IE con marcado válido , un buen doctype y encabezados apropiados , se adherirá al estándar. De lo contrario, puede forzar a los navegadores modernos que cumplen con los estándares a usar "border-box" a través de:

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

La primera declaración es necesaria para Opera, la segunda es para Firefox, la tercera es para Webkit y Chrome.

Aquí hay una prueba simple que hice hace años para probar qué declaración de tamaño de caja admite su navegador: http://phrogz.net/CSS/boxsizing.html

Tenga en cuenta que Webkit (Safari y Chrome) no admite el padding-boxmodelo de caja mediante ninguna declaración.

— Phrogz
fuente

2

+1 por mencionar tanto el cuadro de contenido como los modelos de cuadro de borde. Sin embargo, podría querer profundizar en las diferencias.

— BoltClock

1

@BoltClock Gracias por el ímpetu para responder más rigurosamente. Actualizado.

— Phrogz

Buena respuesta; He estado tratando de recordar (o encontrar) los nombres de las diferentes opciones durante un par de días ... +1 =)

— David dice que reinstale a Monica el

A nadie le importa la ópera.

— Michael J. Calkins

3

@whitelettersinblankpapers Vea por qué W3Schools apesta y luego una referencia mucho mejor que lo lleva al estándar W3C . No sigas más enlaces a W3Schools. Además, agregue "MDN" a las consultas de su motor de búsqueda sobre estándares web en el futuro.

— Phrogz

27

Una regla simple es tratar de evitar el uso de la propiedad de relleno / margen y ancho para el mismo elemento. es decir, usar algo similar a esto

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

— shankhan
fuente

Uso este método de forma regular y nunca tengo problemas con el navegador cruzado.

— Kevin Beal

20

Me topé con esta pregunta y, aunque tiene un par de años, pensé que podría agregar esto en caso de que alguien se tope con este hilo.

CSS3 ahora tiene una propiedad de tamaño de caja. Si establece, diga,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

su clase tendrá 1000px de ancho, en lugar de 1030px. Esto es, por supuesto, increíblemente útil para cualquiera que use un borde del tamaño de un píxel con divisores líquidos, porque resuelve un problema insoluble.

Aún mejor, el tamaño de caja es compatible con todos los principales navegadores, excepto IE7 y versiones inferiores. Para incluir todos los elementos dentro de la dimensión de ancho o alto, establezca el tamaño del cuadro en borde-cuadro. A agregar otros elementos al ancho y / o alto, que es el valor predeterminado, puede establecer el tamaño del cuadro en "cuadro de contenido".

No estoy seguro del estado actual de la sintaxis del navegador, pero sigo incluyendo los prefijos -moz y -webkit:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

— Barcaza de albañil
fuente

Sí, y Paul Irish tiene un buen artículo de blog sobre esto aquí: paulirish.com/2012/box-sizing-border-box-ftw

— Dave Burton

¿Cómo esta respuesta tiene tantos votos positivos cuando es la misma respuesta que la aceptada que se escribió hace 3 años?

— dippas

1

¿Tienes un doctype declarado? Cuando comencé a codificar html tuve este problema, y era por no tener un doctype declarado. Mi favorito es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>

— tybro0103
fuente

1

Para aquellos que aún tendrían el problema, jQuery proporcionó dos propiedades outerWidth ()y innerWitdh ()conocer el ancho de un objeto con o sin bordes ...

— Patricio
fuente