En esta lección aprenderás a poner relleno (padding
), borde (border
) y margen (margin
) a los elementos HTML haciendo uso de las propiedades y valores CSS, al finalizar serás capaz de establecer las cajas con todas las dimensiones que quieras.
Ver índice del contenido
La propiedad padding de CSS
Poner relleno a un elemento de HTML es tan sencillo como establecer la propiedad padding
e indicar la dimensión del relleno con un valor numérico y respectiva unidad de medida, ya sea píxeles, puntos, ems, etc.
Colocar un relleno uniforme con padding CSS
Para establecer un relleno uniforme en todo el alrededor del contenido o elemento, simplemente establecemos la propiedad padding
y su valor indicamos el deseado. Veamos el ejemplo:
Propiedad padding uniforme CSS ejemplo
Código HTML
<img class="imagen" src="gatito.jpg" alt="foto de gatito" height="150px" width="250px" border="1px"/>
Código CSS
.imagen {padding: 50px}
Resultado:

Si te fijas, notarás que el relleno es uniforme en todos los lados de la imagen y solo bastó una instrucción.
Poner rellenos diferentes a cada lado de un elemento con CSS
Si deseamos una dimensión diferente en cada lado del contenido, entonces indicaremos la medida mediante 4 valores, el primero define la dimensión del relleno superior, el segundo la dimensión del lado derecho, el tercero de la parte inferior y el cuarto del lado izquierdo.
La dimensión por defecto de relleno es 0.
Observa el código que establece relleno de 40px en la parte superior, 20px en derecha, 65px en la parte inferior, 80px en el lado derecho y el resultado que produce.
<img class="elemento" src="koala.jpg" border="2px" height="250px" width="400px"/>
.elemento {padding: 40px 20px 65px 80px;}
Resultado:

En el ejemplo empleamos un elemento de imagen para establecer diferentes medidas de relleno a cada lado y para notar la diferencia hemos indicado un borde de 2px en HTML.
Dimensión de rellenos independientes en CSS
También existe la posibilidad de establecer una medida específica solo para un lado, puede ser útil en ciertas ocasiones. Para ello utilizaremos las siguientes propiedades:
padding-top
: margen superior-
padding-bottom
: margen inferior -
padding-left
: margen izquierdo -
padding-right
: margen derecho
Ejemplo de padding diferentes CSS
Código HTML
<img class="imagen" src="gatito.jpg" alt="foto de gatito" height="250px" width="400px" border="1px"/>
Código CSS
.imagen { padding-bottom: 70px; padding-right: 100px; }
Resultado:

En este caso no importa el orden, ya que son independientes. El ejemplo define solo el relleno derecho e inferior.
También se pudo haber trabajado poniendo los cuatro valores en una sola propiedad, estableciendo en cero tanto superior e izquierdo de la imagen.
CSS nos permite llegar a un mismo resultado mediante diversas maneras, lo ideal es trabajar con la menor cantidad de instrucciones posibles para optimizar el código.
Alex.
Color de relleno CSS
Poner color al relleno es tan simple como emplear la propiedad background- color
y en su valor colocar el color en ya sea con palabra clave, valor hexadecimal o RGB. En realidad, background-color
establece el color de fondo, pero sirve par la idea.
Conoceremos con mayor detalle sobre los colores y formatos de fondo en próximas lecciones, aquí solo quería darte una idea por si te lo preguntabas. ¡Sigamos!
La propiedad border
Colocar un borde con CSS a un elemento de HTML puede marca una notable diferencia, añade personalidad y con una combinación adecuada puede convertir simples elementos en atractivos bloques de contenido, y en esta ocasión aprenderás a manejar los bordes.
Para establecer un borde, básicamente necesitamos definir su ancho o tamaño, color y estilo.
Para poder visualizar los resultados es necesario definir las propiedades mencionadas y simplemente lo haremos en orden empezando por el ancho, seguido del estilo y finalmente el color.
La declaración más simple para definir un borde completo en CSS está formada por la propiedad border
y en su valor se define el ancho, estilo y color, en ese orden, separada por espacios, veamos un ejemplo:
HTML
<p class="borde"> Forma simple de poner borde en CSS </p>
CSS
p.borde {border:7px solid blue;}
Resultado:

En el ejemplo, vemos que la instrucción establece un ancho de borde de 5px, un estilo sólido y un color azul.
De ahora en adelante conoceremos cada propiedad independientemente y los valores posibles que nos permitirán establecer una enorme cantidad de posibilidades al momento de trabajar con bordes en CSS. ¡Vamos por ello!
Propiedades y valores para bordes CSS
- Ancho.- Se refiere al ancho de la línea que conforma el borde.
- Color.- para determinar el color de la línea de borde.
- Estilo.- además de un borde de línea sólida, existen otros como los punteados, doble línea, etc.
Border-width para ancho del borde
La propiedad border-width
establece el ancho de borde para un elemento, en su valor puede ir un valor numérico con su respectiva unidad de medida, ya sea px, ems, pt, etc.
Ancho de borde uniforme
Para índica un ancho de borde uniforme en todo el borde del elemento simplemente establecemos la propiedad border-width
con su respectivo valor.
Ejemplo para ancho de borde en CSS
Código HTML
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p> <p class="masborde"> Elemento con texto de 8px de ancho.</p>
Código CSS
p.borde {border-width: 3px;} p.masborde {border-width: 8px;}
Ancho de borde diferentes CSS
También es posible establecer anchos de borde diferentes a cada lado, para ello hacemos uso de las propiedades específicas para cada lado.
border-bottom-width
(Ancho de borde inferior)border-top-width
(Ancho de borde superior)border-left-width
(Ancho de borde izquierdo)border-right-width
(Ancho de borde derecho)
Ejemplo de código
HTML
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
CSS
p.borde { border-bottom-width: 4px; border-top-width: 7px; border-left-width: 5px; border-right-width: 8px; }
Unificando bordes con anchos diferentes en CSS
Podemos definir bordes con anchos diferentes en una única propiedad con cuatro valores, el primer valor indica el ancho del borde superior, seguido del derecho, inferior e izquierdo. Veamos un ejemplo de unificación.
Ejemplo de bordes con anchos diferentes en una declaración CSS
HTML
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
CSS
p.borde { border-width: 7px 8px 4px 5px; }
Antes de poner un ejemplo de resultados de los códigos, conozcamos todas las propiedades y valores de borde de tal manera que podamos ver de forma visual la forma en que se combinan para producir un resultado.
Para obtener un resultado visual es necesario establecer un estilo de borde, lo cual veremos más adelante.
Propiedad border-color para color de borde CSS
La propiedad border-color
nos permite establecer el color de borde de un elemento, están simple como declarar y en su valor colocar el color deseado, ya sea con palabra clave, con valor hexadecimal o RGB.
Para que border-color
tenga efecto visual primero debemos establecer el estilo de borde y lo veremos un poco más adelante.
Colores de borde uniforme CSS
Establecer un color de borde uniforme en todos los lados de un elemento es tan simple como definir la propiedad border-color
y en su valor colocar el colocar deseado.
Ejemplo de border-color CSS uniformes
Código HTML
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p> <p class="masborde"> Elemento con texto de 8px de ancho.</p>
Código CSS
p.borde {border-color: blue;} p.masborde {border-color: red;}
Colores de borde diferentes con CSS
Podemos especificar un color diferente para cada lado de un elemento HTML, para ello empleamos las propiedades específicas para cada lado:
border-top-color
(color de borde superior)border-right-color
(color de borde derecho)border-bottom-color
(color de borde inferior)border-left-color
(color de borde izquierdo)
Ejemplo de código para colores diferentes de borde CSS
Código HTML
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
Código CSS
p.borde { border-top-color: red; border-right-color: blue; border-bottom-color: yellow; border-left-color: green; }
Unificando colores de borde CSS
Podemos establecer colores diferentes para borde mediante la propiedad CSS border-color
y en su valor indicamos los colores diferentes separados por espacios. Es muy simple, veamos el ejemplo de código.
Código CSS para colores de borde diferentes unificados
Código HTML
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p>
Código CSS
p.borde { border-color:red blue yellow green;}
La propiedad border-style para estilo de borde
La propiedad border-style
permite establecer el estilo de la línea borde, en su valor podemos lo podemos indicar cuál será. Existen varios estilos y los conoceremos a continuación:
Valores de border-style CSS
hidden
.- Oculta el borde.none
.- evita que se muestre el borde y es el valor por defecto.solid
.- muestra un borde sólido, línea recta y continua.dotted
.- el borde se muestra con puntos redondeados.dashed
.- muestra un borde formado por segmentos de línea, como si fueran guiones.double
.- estilo con doble línea.groove
.- muestra una línea con apariencia tallada.ridge
.- este muestra un borde de estilo extruido.inset
.- estilo de borde le da una apariencia de incrustado al elemento.outset
.- hace que el elemento parezca en relieve.
Estilo de borde uniforme CSS
Establecer un estilo uniforme en todos los bordes de un elemento es tan sencillo como establecer la propiedad border-style
y colocar en su valor el estilo deseado.
Ejemplo de borde uniforme
Código HTML
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p> <p class="masborde"> Elemento con texto de 8px de ancho.</p>
Código CSS
p.borde {border-style: solid;} p.masborde {border-style: dotted;}
Estilos de borde variado
CSS nos permite establecer un tipo de borde diferente a cada lado del elemento que maquetamos, para ello haremos uso de las propiedades especificadas para cada lado y en su valor especificamos el que deseamos.
-
border-top-style
(superior) -
border-right-style
(derecho) border-bottom-style
(inferior)border-left-style
(izquierdo)
Ejemplo de estilos de borde diferentes
Código HTML
<p class="borde"> Elemeto de texto con borde de 3px de ancho </p> <p class="masborde"> Elemento con texto de 8px de ancho.</p>
Código CSS
p.borde { border-top-style: solid; border-right-style: dotted; border-bottom-style: double; border-left-style: dashed; } p.masborde { border-top-style: solid; border-right-style: dotted; border-bottom-style: double; border-left-style: dashed; }
Cómo poner bordes en CSS
Ahora que conocemos la mayoría de las propiedades y valores para poner borde a los elementos HTML mediante CSS es momento de poner en práctica lo aprendido.
Recuerda, ahora aplicaremos el ancho, color y estilo de borde, todos juntos para poder apreciar el resultado de manera visual. ¡Vamos!
Para el primer ejercicio de bordes, crea un párrafo con las siguientes características de borde:
- Color de borde azul.
- Ancho de borde uniforme de 5px.
- Estilo de borde uniforme punteado.
- Relleno de 13px.
HTML
<p class="borde"> Elemento de texto con borde de 5px de ancho, color azul y estilo punteado en CSS. </p>
CSS
p.borde { border-color: blue; border-width: 5px; border-style: dotted; padding:13px }
Resultado:

El segundo ejercicio consiste en crear un párrafo con las siguientes características:
- Relleno de 20px.
- Ancho de borde variado: superior 2px, derecho 4px, inferior 8px, izquierdo 16px.
- Color de borde variado: superior rojo, inferior amarillo, derecho azul, izquierdo negro.
- Estilo de borde variado: Superior solidó, inferior punteado, derecho doble línea e izquierdo con guiones.
Solución:
HTML
<p class="variado"> Este es un párrafo con borde variado en color, estilo y dimensión.</p>
CSS
p.variado { padding: 20px; border-width: 2px 4px 8px 16px; border-color: red blue yellow black; border-style: solid double dotted dashed; }
Resultado:

La propiedad margin
La propiedad margin
en CSS funciona de forma similar a las propiedades de borde y relleno. Margin
es la propiedad que establece un margen para el contenido; recuerda que el margen es el espacio que se encuentra fuera del borde, pero asociada al elemento en cuestión, de tal manera que los separa de otros bloques de contenido.
Los valores para márgenes pueden tomar valores negativos.
Márgenes uniformes en CSS
Para poner márgenes de igual medida en todos los lados de un contenido simplemente emplearemos la propiedad margin
y en su valor podemos utilizar un valor numérico con su unidad de medida.
Ejemplo de márgenes uniformes
Para poder visualizar el resultado, crearemos un contenedor div
con un identificador class="contenedor"
, le pondremos fondo color azul y en ella colocaremos un elemento de párrafo y aplicaremos márgenes uniformes; la primera tendrá margen -15px, la segunda 0px, la tercera 30px y la cuarta veremos las diferencia
HTML
<div class="contenedor"> <p class="negativo"> Párrafo con -15px márgenes uniformes.</p> </div><br> <div class="contenedor" > <p class="cero"> Párrafo con márgenes 0px uniformes.</p> </div><br> <div class="contenedor" > <p class="trenta"> Párrafo con márgenes 30px uniformes.</p> </div><br> <div class="contenedor" > <p class="senta"> Párrafo con márgenes 60px uniformes.</p> </div>
CSS
div.contenedor { background-color: blue; border: 1px solid green; max-width: 500px; } p.negativo { background-color: red; margin: -15px; } p.cero { background-color: red; margin: 0px;} p.trenta { background-color: red; margin: 30px;} p.senta { background-color: red; margin: 60px;}
Resultado:

Márgenes diferentes a cada lado CSS
Podemos establecer márgenes con diferentes dimensiones a cada lado de los elementos HTML, para este objetivo podemos emplear la propiedad margin
y en sus valores colocar cuatro medidas separadas con espacios, la primera corresponde al margen superior, sigue el margen derecho, luego inferior y finalmente el izquierdo.
Ejemplo.
HTML
<img class="imagen" src="gatito.png">
CSS
img.imagen {margin: 7px 8px 9px 14px;}
Otra manera de hacer es empleando las propiedades específicas que corresponden a un lado determinado.
margin-top
(margen superior)-
margin-right
(margen derecho) -
margin-bottom
(margen inferior) -
margin-left
(margen izquierdo)
Ejemplo de márgenes específicos diferentes CSS
HTML
<div class="contenedor"> <p class="variado"> Párrafo con margen 40px superior, 60px derecha y 0px abajo.</p> </div>
CSS
div.contenedor { background-color: blue; border: 1px solid green; max-width: 500px; } p.variado { background-color: red; margin-top: 40px; margin-right:60px; margin-bottom:0px; }
Resultado:

Otras maneras de poner margen
CSS nos permite especificar el margen de un elemento de varias maneras y podemos emplearlos según nuestros objetivos.
Margen vertical y horizontal
El margen vertical indica el valor del margen superior e inferior, mientras que el margen horizontal influye sobre el margen derecho e izquierdo. Para poner un margen de este tipo, establecemos la propiedad margin
y en su valor colocamos dos valores, el primero indica el margen vertical y el segundo el margen horizontal.
Ejemplo:
HTML
<p class="elemento"> Este es un elemento de texto </p>
CSS
p.elemento {margin; 20px 30px;}
Resultado: el resultado del código será un bloque de texto con 20px de margen superior e inferior, 30px de margen derecho e izquierdo.
Margen superior, horizontal e inferior
Cuando en el valor de las dimensiones de margen colocamos tres valores, el primero corresponde al margen superior, el segundo al margen horizontal, esto incluye al derecho e izquierdo, el tercer valor corresponde al margen de abajo.
Ejemplo:
HTML
<p class="elemento"> Este es un elemento de texto </p>
CSS
p.elemento {margin: 10px 15px 14px;}
El resultado será un bloque con 10px de margen superior, 15px de margen derecho e izquierdo y un margen de 14px inferior.
[popup_anything id=»4273″]
Que buena documentación!!!!!
Muchas gracias!!!
Fenomenal documentación. Muchas gracias.
Los cursos son muy buenos y con una buena
definición
Hola Thomas!
Gracias por el comentario.