Todos los elementos HTML se pueden considerar como cuadros.
El modelo de caja es esencialmente una caja que envuelve cada elemento HTML. Consiste en: márgenes, bordes, relleno y el contenido real.
El ancho y el alto son las propiedades que definen el tamaño de todos los elementos DE BLOQUE. En los elementos de linea tanto el alto como el ancho ocupan solo lo que ocupe el contenido.
Elemento de bloque de 80*50
Elemento en lineaEs la propiedad que permite generar espacio entre elementos. Es un shorthand (propiedad abreviada) que controla los 4 lados posibles a los que dar márgenes.
Admite hasta 4 valores que van en el orden de las agujas del reloj.
Los elementos en bloque toman las 4 márgenes y los elementos en línea toman solo los valores de derecha e izquierda.
Los elementos en bloque, si tienen un ancho declarado, se pueden alinear hacia la izquierda (por defecto), hacia a la derecha o en el centro de la página mediante el valor auto en la propiedad de margin. Ojo, se alinea o se centra EL ELEMENTO, NO EL CONTENIDO.
En css las márgenes verticales para cualquier elemento colapsan. Esto quiere decir que por ejemplo, teniendo 2 elementos, uno encima del otro, el margin-bottom del primer elemento no se suma con el margin-top del segundo elemento. En márgenes horizontales si se suman pero las verticales no.
Tambien, algo que sucede siempre con las márgenes cuando se utilizan elementos hijos, es que las márgenes de dichos elementos afectan al elemento padre, pero hay formas de evitar eso.
Entre el bloque 2 y el bloque 3 solo hay 60px de margin, los cuales son del bloque 3, sin tomarse en cuenta el margin-bottom de 10px del bloque 2 debido al colapsado de márgenes.
Es la propiedad que permite generar espacio interno entre el borde y la caja. Es un shorthand (propiedad abreviada) que controla los 4 lados posibles a los que dar padding.
Admite hasta 4 valores que van en el orden de las agujas del reloj.
A diferencia de margin, padding si aplica por los 4 lados a los elementos tanto en bloque como en línea.
Es la propiedad que permite modificar el borde de la caja. Es un shorthand (propiedad abreviada) que agrupa 3 propiedades:
De igual forma que en padding y margin, las 3 propiedades de border admiten de 1 a 4 valores que van en el orden de las agujas del reloj.
Es la propiedad que permite controlar el cálculo que hace el navegador a la hora de modificar las propiedades content, padding y border. Sus 2 valores son:
La propiedad display sirve para cambiar el contexto de los elementos dentro del navegador, Admite varios valores:
Elemento de bloque 11
Elemento de bloque 12
Elemento en linea 11 Elemento en linea 12 Elemento en linea 13