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.

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;
}

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;
}

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).

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;
}

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.

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;
}

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.

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.
Copy link
On this page
Márgenes
Atajo con margin
Bordes
Atajo con border
Bordes redondeados
Márgenes externas (padding)
Atajo con padding
Ancho y alto