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.
Last modified 2mo ago