Las propiedades: border, padding y margin en CSS

Anterior
Avanzar

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.

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

Te recomendamos leer:  Estilo para listas en CSS

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 solida, existen otros como los punteados, doble linea, 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.

Te recomendamos leer:  La propiedad Background color e imagen de fondo en CSS

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 separadas por espacios. Es muy simple, veamos el ejemplo de código.

Código CSS para colores de borde diferentes unificado

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, linea 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 linea.
  • 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:

Te recomendamos leer:  Qué es CSS y Introducción a CSS

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

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos