CSS. Entender las propiedades de borde, margen y relleno

Este tutorial le ayudará a comprender mejor las propiedades de borde (border), relleno (padding) y margen (margin) de CSS. Estas propiedades ayudan mucho a los desarrolladores a colocar elementos en la página web de la manera necesaria.

Vamos a crear un div y asignar las propiedades de margen, relleno y borde.

Propiedad de Padding (relleno)

Las propiedades de relleno de CSS definen el espacio entre el elemento de borde y el elemento de contenido. Se puede definir el valor de relleno de la siguiente manera:

• padding-top: 10px;
• padding-right: 10px;
• padding-bottom: 10px;
• padding-left: 10px;

También puede utilizar la propiedad:

• padding:25px 50px 75px 100px;
  • padding superior es 25px
  • padding derecho es 50px
  • padding bajo es 75px
  • padding izquierdo es 100px
  
  
• padding:25px 50px 75px;
  • padding superior es 25px
  • padding derecho y padding izquierdo son 50px
  • padding bajo es 75px
  
  
• padding:25px 50px;
  • padding superior y padding bajo son 25px
  • padding derecho y padding izquierdo son 50px
  
  
• padding:25px;
  • todos paddings son 25px

Nota: el valor de relleno es añadido a la anchura del elemento y es afectado por el fondo del elemento.

En otras palabras, tenemos el elemento div con la clase de div-1:

div.div-1{
width:150px;
padding: 25px;}

La anchura del navegador agrega los valores de relleno izquierdo y derecho al ancho del cuadro. Como resultado, Usted verá el cuadro de 200 píxeles de ancho.

Propiedad de Border (borde)

Las propiedades de borde de CSS le permiten especificar el estilo y el color del borde del elemento.

border-width (anchura de borde)

La propiedad border-width es utilizada para configurar el ancho de borde. El ancho es especificado en píxeles, o por medio de uno de los tres valores predefinidos: thin, medium, o thick.

border-color (color de borde)

La propiedad border-width es utilizada para configurar el color de borde. Se puede configurar color por:

• name – specify a color name, like “red”
• RGB – specify a RGB value, like “rgb(255,0,0)”
• Hex – specify a hex value, like “#ff0000”

border-style (estilo de borde)

• dotted: Define un borde punteado
• dashed: Define un borde de rayas
• solid: Define un borde sólido
• double: Define dos bordes. El ancho de dos bordes es el mismo que el valor border-width
• groove: Define un borde estriado (grooved) 3D. El efecto depende del valor de border-color
• ridge: Define un borde puntiagudo (ridged) 3D. El efecto depende del valor de border-color
• inset: Define un borde de inset 3D. El efecto depende del valor de border-color
• outset: Define un borde de outset 3D. El efecto depende del valor de border-color

Con la ayuda de la propiedad shortand puede definir el borde del elemento de la siguiente manera:

div.div-2{
	border:1px solid #ccc;
    }

Propiedad de Margin (margen)

Las propiedades de margen de CSS define el espacio alrededor de elementos. El margen limpia un área alrededor de un elemento (fuera de borde). El margen no tiene color de fondo, y es completamente transparente.

Se puede definir el margen de valores de elementos de la siguiente manera:

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

También puede utilizar la propiedad shortand:

• margin:25px 50px 75px 100px;
  • margen superior es 25px
  • margen derecho es 50px
  • margen inferior (bajo) es 75px
  • margen izquierdo es 100px
  
  
• margin:25px 50px 75px;
  • margen superior es 25px
  • margen derecho y margen izquierdo son 50px
  • margen inferior (bajo) es 75px
  
  
• margin:25px 50px;
  • margen superior y margen inferior (bajo) son 25px
  • margen derecho y margen izquierdo son 50px
  
  
• margin:25px;
  • cuatro márgenes son 25px

Usando el valor auto de la propiedad de margen se puede centrar el bloque horizontal.

div.div-3{
	margin: 0 auto;
    }