CSS Reference


Box Model

Para entender cómo calcular las medidas totales de un elemento en la página, es necesario entender cómo funciona el contenido del box model.

Properties Description Value
Margin El espacio entre el <border> y borde exterior del elemento En medida o auto. Ej: 6px (Abreviación para cuatro lados). Ej2: 0 auto (auto centra el izq y der)
Border La línea entre el contenido y el padding Solid, hidden, dotted, dashed, inset, outset, etc. & color & pixel size.
Padding El espacio o área entre el contenido y borde. Usualmente para expandir el background color. En medida. Ej: 6px (Abreviación para cuatro lados)
Box-sizing Controla el tipo de box model que el browser usará para interpretar la web. Calcula cómo renderiza el width y height del content. Border-box( el width es calculado como la suma del contenido, padding y border), o content-box (por default. El width es calculado solo como el width del content.
boxmodel


Position of an element

Propiedades que ajustan la posición de un element en relación de otro.

Properties Description Values
Position Ubica al objeto en relación al documento u otro elemento Static, Relative, Absolute, Fixed, Sticky
Display Cómo debe compartir el espacio horizontal con otros elementos. Inline, Block, Inline-block
Z-index Qué tan lejos o cerca debería aparecer el elemento en la web cuando superpone a otro elemento. No funciona con static. Nro entero
Float Mueve el elemento hacia izquierda o derecha. Usualmente usado para textos de imágenes. Debe especificar medida. Right, Left
Clear Cómo debería comportarse el element cuando choca con otro. Right, Left, Both, None