Saltar al contenido principal

El modelo de caja en CSS

El modelo de caja se compone del margen externo (margin), borde (border) y margen interno (padding) de un elemento.

Márgenes​

El margen se utiliza para definir el espacio alrededor del elemento.

Puedes utilizar las propiedades CSS margin-top, margin-right, margin-bottom y margin-left para definir el margen superior, derecho, inferior e izquierdo respectivamente:

p {
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
}

Atajo con margin​

Para reducir el código puedes especificar todas las márgenes en una sola propiedad margin:

p {
  margin: 5px 5px 5px 5px;
}

El orden es: margen superior, derecho, inferior e izquierdo.

Si todos los márgenes son iguales puedes hacer lo siguiente:

p {
  margin: 5px;
}

margin también puede recibir dos valores: el valor para el margen superior e inferior, y el valor para el margen izquierdo y derecho.

Por ejemplo, la siguiente regla le aplicaría un margen de 10px arriba y abajo, y 20px a los lados.

p {
  margin: 10px 20px;
}

margin también puede recibir tres valores: el valor para el margen superior, y el margen de los lados, y el margen inferior.

Por ejemplo, la siguiente regla le aplicaría un margen de 10px arriba, 20px a los lados y 30px abajo:

p {
  margin: 10px 20px 30px;
}

Bordes​

Las propiedades CSS border-width, border-style y border-color nos permiten definir el ancho, el estilo y el color del borde de un elemento.

El siguiente ejemplo definiría un borde sólido de 1px de color rojo:

p {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

Las opciones más comunes de border-style son solid (sólido), dotted (punteado), dashed (guiones) y double (doble).

Cada una de las propiedades puede recibir de uno a 4 valores, muy parecido a como funciona con los márgenes:

  • Un valor: aplica a los 4 lados (p.e. border-width: 5px).
  • Dos valores: el primero para arriba y abajo, el segundo a los lados. (p.e. border-width: 5px 10px)
  • Tres valores: el primero para arriba, el segundo para los lados y el tercero para abajo (p.e. border-width: 5px 10px 20px).
  • Cuatro valores: arriba, derecha, abajo, izquierda (p.e. border-width: 1px 2px 3px 4px).

Atajo con border​

Puedes utilizar el atajo border para definir el ancho, estilo y color de todos los lados:

p {
  border: 1px solid blue;
}

También puedes utilizar el atajo pero para cada uno de los lados:

p {
  border-top: 1px solid blue;
  border-right: 2px dashed red;
  border-bottom: 3px dotted yellow;
  border-left: 4px double green;
}

Bordes redondeados​

La propiedad border-radius se utiliza para agregar bordes redondeados a un elemento:

p {
  border: 2px solid red;
  border-radius: 5px;
}

Puedes asignar la propiedad border-radius a cada esquina individualmente con border-top-left-radius, border-top-right-radius, border-bottom-left-radius y border-bottom-right-radius.

Márgenes externas (padding)​

El padding se utiliza para definir el margen interno de un elemento.

Al igual que con los márgenes externos, CSS tiene propiedades para definir el padding de cada lado del elemento: padding-top, padding-right, padding-bottom y padding-left.

p {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

Atajo con padding​

Para reducir el código puedes especificar todos los paddings en una sola propiedad padding:

p {
  padding: 5px 5px 5px 5px;
}

padding puede recibir uno, dos, tres y cuatro valores como margin:

  • Un valor: aplica a los 4 lados.
  • Dos valores: el primero aplica arriba y abajo, el segundo a los lados.
  • Tres valores: el primero arriba, el segundo a los lados y el tercero abajo.
  • Cuatro valores: arriba, derecha, abajo, izquierda.

Ancho y alto​

Puedes especificar el ancho y el alto de un elemento utilizando las propiedades width y height:

p {
  width: 400px;
  height: 300px;
}

El padding y el borde suman al ancho y alto del elemento.