Margen, Relleno y Borde

Hoy te enseñare lo básico de como poner espacios entre tus objetos (etiquetas como <a> o <div> para mencionar algunas).

Si tu ya has leído los artículos anteriores sobre CSS entonces sabes que Margen, Relleno y Borde son propiedades que le puedes aplicar a un selector. Con estos tres podes empezar a diseñar cajas y empezar hacer una pagina decente. Muchos han hecho paginas simples solo usando lo básico de CSS.

Empecemos, creo que la mejor forma de explicar es con una imagen. Pero primero vamos explicar los valores que se usan en las propiedades mencionadas arriba y las variaciones que existen.

Margen

Margenes es el espacio que un elemento/objeto de HTML tiene alrededor. Tu puedes asignar margenes individualmente o todo a la vez.

Para asignar individualmente tendrás que usar las siguientes propiedades:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Lo de arriba solo toma un valor a la vez. Para asignar todo a la vez, simplemente usas:

  • margin : arriba derecha abajo izquierda
  • margin : arribaAbajo derechaIzquierda
  • margin : todosLosLados

Este puede tomar todos los lados a la vez. Los valores se pueden definir usando pixeles, em, cm,  etc. Ejemplo:

Relleno

Relleno es el espacio que un elemento/objeto de HTML tiene adentro del mismo. Al igual que margen, también puedes asignar rellenos individualmente o todo a la vez.

Para asignar individualmente:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Para asignar todo a la vez, simplemente usas:

  • padding : arriba derecha abajo izquierda
  • padding : arribaAbajo derechaIzquierda
  • padding : todosLosLados

Los valore son iguales a los de margen. Ejemplo:

Borde

Esta propiedad crea un borde al elemento/objeto HTML. Al igual que margen y relleno, también puedes asignar bordes individualmente o todo a la vez.

  • border-top
    • border-top-width
    • border-top-color
    • border-top-style
  • border-right
    • border-right-width
    • border-right-color
    • border-right-style
  • border-bottom
    • border-bottom-width
    • border-bottom-color
    • border-bottom-style
  • border-left
    • border-left-width
    • border-left-color
    • border-left-style

Para asignar todo a la vez:

  • border
    • border-width
    • border-color
    • border-style

Para esta propiedades los valores van a ser diferentes. Tienes el ancho (width), color y estilo (style).

Ancho

El ancho tomas las unidades como pixeles, cm, em, etc.

Color

Los colores pueden tomar valor hexidecimal, rgb() o nombre de colores (en ingles, ex: red (rojo)).

Estilo

El estilo es el tipo de linea del borde, los valores pueden ser none (ninguno), solid (solido), dotted (punteado), dashed (discontinuado), double (doble).

Ejemplo:

Conclusion

Ahora que ya sabes como usar esa tres propiedades podrás usar código como el siguiente. Si te das cuenta use una forma aun mas corta para margen y relleno.

En la siguiente figura podrás ver como estas propiedades están organizadas. Lo que tiene rallas no lo vera el usuario (osea es invisible), solo el borde saldrá. Yo le puse color para poder hacer las diferencias.

[icon:user]ABCO
[icon:tag]
notice

No Trackbacks

No hay trackbacks todavia, sea el primero, Copie el enlace de arriba.
notice

No comments

No hay comentarios todavia, pero tu puedes dejar tu comentario
add comment

Deje su comentario