Resumen del modelo de cuadro CSS

El modelo de cuadro CSS (Box Model) regula cómo el cuadro del elemento maneja el contenido del elemento,Padding、Borde y Margen método.

Resumen del modelo de cuadro CSS

Modelo de cuadro CSS

La parte más interna del cuadro del elemento es el contenido real, rodeado directamente por el padding. El padding presenta el fondo del elemento. El borde del padding es el borde. Fuera del borde está el margen, que por defecto es transparente y, por lo tanto, no obstruye a ningún elemento posterior.

Consejo:El fondo se aplica a la área compuesta por el contenido y el padding, el borde.

El padding, el borde y el margen son opcionales y el valor predeterminado es cero. Sin embargo, muchos elementos estarán configurados por la hoja de estilos del agente de usuario. Se puede sobrescribir estos estilos del navegador estableciendo el margen y el padding del elemento en cero. Esto se puede hacer por separado o utilizando un selector universal para configurar todos los elementos:

* {
  margin: 0;
  padding: 0;
}

En CSS, width y height se refieren al ancho y la altura del área de contenido. Aumentar el padding, el borde y el margen no afectará el tamaño del área de contenido, pero aumentará el tamaño total del cuadro del elemento.

Supongamos que cada lado de la caja tiene 10 píxeles de margen exterior y 5 píxeles de padding interior. Si se desea que el cuadro del elemento alcance 100 píxeles, se debe establecer el ancho del contenido en 70 píxeles, véase la imagen siguiente:

Ejemplo de modelo de cuadro CSS 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Consejo:El padding, el borde y el margen se pueden aplicar a todos los lados de un elemento o a un lado específico.

Consejo:El margen puede ser negativo y, en muchos casos, es necesario usar márgenes negativos.

Compatibilidad del navegador

Una vez que se ha configurado adecuadamente el DTD para la página, la mayoría de los navegadores mostrarán el contenido según la imagen superior. Sin embargo, la presentación de IE 5 y 6 es incorrecta. Según la norma de W3C, el espacio ocupado por el contenido del elemento se establece mediante la propiedad width, mientras que los valores de padding y border alrededor del contenido se calculan por separado. Desafortunadamente, IE5.X y 6 utilizan su propio modelo no estándar en el modo de compatibilidad. La propiedad width de estos navegadores no es el ancho del contenido, sino el total del ancho del contenido, el padding y el border.

Aunque hay métodos para resolver este problema. Pero la mejor solución actual es evitarlo. Es decir, no agregar márgen interno con ancho especificado a los elementos, sino intentar agregar márgen interno o márgen externo al elemento padre y elemento hijo.

Traducción de términos

  • element: elemento.
  • padding: márgen interno, también se traduce como relleno.
  • border: borde.
  • margin: márgen externo, también se traduce como espacio o borde de espacio.

En codew3c, nos referimos a padding y margin de manera uniforme como márgen interno y márgen externo. El espacio dentro del borde es el márgen interno, y el espacio fuera del borde es el márgen externo, ¿es fácil recordar?:）