Skip to content
CSS
Selectores, propiedades y valores
Mecanismos para añadir CSS a un archivo HTML
Selectores
Pseudoclases y pseudoelementos
Cascada y especificidad
Herencia
Display
Modelo de cajas
Posicionamiento
Medidas
Colores
Z-index y el contexto de apilamiento
Responsive Design
Arquitectura CSS
Flexbox
More
Share
Explore

icon picker
Modelo de cajas

Colapso de márgenes
El modelo de caja se compone de cuatro elementos: margin, border, padding y contenido.
⁠
image.png
⁠
⁠
Si entras a las herramientas de desarrollador de tu navegador y señalas un elemento HTML, en la sección de estilos te aparecerá una vista parecida a la anterior imagen, este es el modelo de caja del elemento señalado.

Contenido del elemento HTML

El contenido del elemento, como su nombre lo indica, es todo lo que está dentro del elemento. Este tiene medidas establecidas por las propiedades width y height, que representan la anchura y la altura, respectivamente. Si imaginamos una caja, este valor sería todo lo que decidas colocar dentro.
div {
width: 100px;
height: 100px;
}

Bordes del elemento HTML

El border consiste en el perfil o borde de un elemento HTML. Si imaginamos una caja, sería la caja en sí. Para definir un borde es necesario utilizar las siguientes tres propiedades:
border-color: establece el color del borde.
border-style: establece el estilo propio del borde, estos pueden ser: none (sin borde), dotted (puntos), dashed (guiones), solid (continuo), double (doble continuo), groove (recuadro).
border-width: estable la anchura del borde.
También se puede establecer los tres valores en una sola propiedad border donde no importa el orden.
div {
border: [color] [style] [width];
}

div {
border-color: red;
border-style: solid;
border-width: 1px;
}
⁠
Ejemplo de bordes
⁠
⁠
También estableciendo de manera individual los valores de cada posición:
div {
border-top: 5px solid blue;
border-bottom: 5px solid red;
border-left: 5px solid black;
border-right: 5px solid yellow;
}

Espaciado interno del elemento HTML o padding

El padding consiste en el espacio entre el borde y el contenido del elemento HTML. Si imaginamos una caja, este valor sería el espacio entre la caja y lo que deseas guardar.
div {
padding: 100px;
}
⁠
Ejemplo de padding
⁠
⁠
Puedes establecer el padding en cada posición en una sola línea de las siguientes maneras:
padding: [arriba] [derecha] [abajo] [izquierda], siguiendo el sentido horario.
padding: [arriba] [abajo] [derecha e izquierda], siguiendo el eje principal.
padding: [arriba y abajo] [derecha e izquierda], siguiendo los ejes del elemento.
También estableciendo de manera individual los valores de cada posición:
div {
padding-top: 10px;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 10px;
}

Espaciado externo del elemento HTML o margin

El margin consiste en el espacio entre el borde y otro elemento HTML. Si imaginamos una caja, es el espacio entre tu caja y otra caja.
div {
margin: 10px;
}
⁠
Ejemplo de margin
⁠
⁠
Puedes establecer el margin en cada posición en una sola línea de las siguientes maneras:
margin: [arriba] [derecha] [abajo] [izquierda], siguiendo el sentido horario.
margin: [arriba] [abajo] [derecha e izquierda], siguiendo el eje principal.
margin: [arriba y abajo] [derecha e izquierda], siguiendo los ejes del elemento.
También estableciendo de manera individual los valores de cada posición:
div {
margin-top: 10px;
margin-bottom: 15px;
margin-left: 20px;
margin-right: 10px;
}

Qué son los valores por defecto

Por defecto, el navegador establece valores iniciales a algunas propiedades CSS, este es el caso de margin y padding. Una buena práctica es utilizar el selector universal para restablecer estos valores a 0, para que no surjan errores inesperados.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Qué es el tamaño total del elemento

El tamaño total del elemento está determinado por la suma de los valores de las propiedades border padding y widtho height, dependiendo del eje. La propiedad margin no está incluida en este cálculo.
Por ejemplo, definimos los siguientes estilos:
div{
width: 150px;
height: 150px;
padding: 20px;
border: 10px solid gray;
margin: 30px;
}
⁠
Ejemplo de medidas totales
⁠
⁠
El tamaño total del elemento será de 210px en ambos ejes, donde la suma fue: 150 (altura/anchura) + 20 x 2 (padding ambos lados) + 10 x 2 (borde ambos lados). Si evaluamos este elemento en las herramientas del desarrollador mostrará su tamaño como 210x210.
Contenido del elemento HTML
Bordes del elemento HTML
Espaciado interno del elemento HTML o padding
Espaciado externo del elemento HTML o margin
Qué son los valores por defecto
Qué es el tamaño total del elemento
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.