En este artículo vamos a conocer como aplicar márgenes y espaciado interno mediante las propiedades margin y padding que junto con las propiedades width y border determinan la anchura y altura final de un elemento.
Márgenes
Cuando hablamos de márgenes en CSS nos referimos los espacios que hay entre los bordes de un elemento HTML y los bordes de otros elementos adyacentes. Como ya sabes, todos los elementos HTML están formados por 4 bordes no visibles, pues bien, el espacio que separa al borde de un elemento determinado con respecto al borde de otro elemento cercano al mismo es lo que conocemos como margen en CSS.
Básicamente CSS dispone de 4 propiedades para aplicar estilos a los márgenes:
margin-top aplica un margen superior
margin-right aplica un margen lateral derecho
margin-bottom aplica un margen inferior
margin-left aplica un margen lateral izquierdo
La sintaxis de las 4 propiedades es la misma:
margin-top: longitud | % | auto
Auto es el valor que aplica el navegador automáticamente si no lo establecemos nosotros
Longitud % indica que podemos definir un valor numérico, positivo o negativo, con cualquiera de las unidades relativas como porcentaje, pixeles o em.
Vamos a ver un ejemplo en el que aplicaremos 4 márgenes diferentes a un elemento <p>:
Lo primero que haremos será crear el contenido:
<h1>Texto con margen</h1>
<p> Este elemento tiene un margen superior de 150px, un margen derecho de 100px, un margen inferior de 150px y un margen izquierdo de 80px.</p>Lo siguiente que haremos será crear la regla CSS para aplicar los márgenes:
p {
border: 1px solid black;
margin-top: 150px;
margin-bottom: 150px;
margin-right: 100px;
margin-left: 80px;
}Hemos agregado la propiedad border para que sean visibles los bordes del elemento <p>. Y este sería el resultado en el navegador:
See the Pen Margins CSS by simplicitytree (@simplicitytree) on CodePen.
CSS permite aplicar valores negativos, los cuáles podemos utilizar para ajustar posiciones que no se muestran como queremos. Sin embargo, recomienda no abusar del uso de márgenes negativos debido a que esto genera un código de mala calidad. Es decir, solo debemos utilizarlos si esto es estrictamente necesario.
Propiedad de atajo margin
Podemos definir de forma simultánea los cuatro márgenes de un elemento empleando la propiedad de atajo margin. Esta propiedad admite entre uno y cuatro valores:
Si solo definimos un valor, el navegador aplica el mismo margen a todos los lados.
p {
border: 1px solid black;
margin: 90px;
}Si establecemos dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes izquierdo y derecho.
p {
border: 1px solid black;
margin: 90px 150px;
}Si indicamos tres valores, el primero se asigna al margen superior, el segundo valor se asigna los márgenes izquierdos y derecho, y el tercero al margen inferior.
p {
border: 1px solid black;
margin: 90px 150px 80px;
}Si definimos cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo.
p {
border: 1px solid black;
margin: 90px 150px 80px 100px;
}Relleno o espaciado interno
Ahora vamos a conocer la propiedad padding que sirve para aplicar un espaciado interno entre elemento HTML y su propio borde. Esta propiedad suele confundirse con la propiedad margin, pues en algunos casos el efecto visual que ambas producen es muy parecido.
Al igual que las propiedades que controlan los márgenes, CSS dispone de 4 propiedades para aplicar estilos al relleno:
padding-top aplica un relleno interior en el espacio superior de un elemento.
padding-right aplica un relleno interior en el espacio derecho de un elemento.
padding-bottom aplica un relleno interior en el espacio izquierdo de un elemento
padding-left aplica un relleno interior en el espacio inferior de un elemento.
La sintaxis es la siguiente:
padding-top: tamaño | porcentaje
Por defecto el valor del relleno es igual a cero, pero podemos asignar un valor numérico seguido de cualquier unidad relativa.
Para ver como funciona esta propiedad, vamos a aplicar un relleno o espaciado interno al siguiente elemento <p>:
<h1>Texto con padding</h1>
<p> Este elemento tiene un padding superior de 50px, un padding derecho de 100px, un padding inferior de 50px y un padding izquierdo de 80px.</p>Luego aplicamos estilos con CSS:
p {
border: 1px solid black;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 100px;
padding-left: 80px;
}Este sería el resultado en el navegador:
See the Pen Padding CSS by simplicitytree (@simplicitytree) on CodePen.
Propiedad de atajo padding
Y al igual que las propiedades de los márgenes podemos utilizar una propiedad de atajo llamada padding.
Si sólo definimos un valor, el navegador aplica el mismo padding a todos los lados.
p {
border: 1px solid black;
padding: 90px;
}Si establecemos dos valores, el primero se asigna al padding superior e inferior y el segundo se asigna al padding izquierdo y derecho.
p {
border: 1px solid black;
padding: 90px 150px;
}Si indicamos tres valores, el primero se asigna al padding superior, el segundo valor se asigna al padding izquierdo y derecho, y el tercero al padding inferior.
p {
border: 1px solid black;
padding: 90px 150px 80px;
}Si definimos cuatro valores, el orden de asignación es: padding superior, padding derecho, padding inferior y padding izquierdo.
p {
border: 1px solid black;
margin: 90px 150px 80px 100px;
}
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Los mejores Frameworks CSS: una guía completa para desarrolladores - septiembre 14, 2024
- Qué es una página web estática, cómo funciona y cómo crearla - septiembre 2, 2024
- Números en JavaScript - agosto 2, 2024
