Estilo margin-bottom

Gracias a este atributo indicaremos el tamaño que tendrá el margen de la parte inferior de la página. La indicación será mediante unidades de medida de CSS.

Estilo margin-top

Gracias a este atributo indicaremos el tamaño que tendrá el margen de la parte superior de la página. La indicación será mediante unidades de medida de CSS.

Estilo margin-left

Gracias a este atributo indicaremos el tamaño que tendrá el margen izquierdo de la página. La indicación será mediante unidades de medida de CSS.

Estilo margin-right

Gracias a este atributo indicaremos el tamaño que tendrá el margen derecho de la página. La indicación será mediante unidades de medida de CSS.

Estilo margin

Los cuatro estilos antes vistos se pueden definir con el atributo margin. Con este único estilo podemos definir los cuatro márgenes vistos con anterioridad.

En el siguiente enlace podrás ver dos ejemplos de estilos de margen: Estilos de márgenes. Observa el código fuente de la página para averiguar cómo lo hemos hecho.

Estilo padding-left

El estilo padding indica el espacio insertado entre el borde del elemento que contiene los elementos que se ven afectados por el estilo y éstos estilos en sí. Podríamos comparar su función al “cellpadding” de una tabla.

En el estilo padding-left se insertaría el espaciado por la izquierda de los elementos.

Estilo padding-right

En este estilo el espacio que se insertaría sería por la derecha de los elementos.

Estilo padding-bottom

En este estilo el espacio que se insertaría sería por la parte inferior de los elementos.

Estilo padding-top

En este estilo el espacio que se insertaría sería por la parte superior de los elementos.

Estilo padding

Al igual que ocurría con el estilo margin, si usamos el padding a secas, sin ningún otro atributo más, el espacio se insertará en los cuatro elementos: arriba, abajo, a la derecha y a la izquierda.

En el enlace siguiente verás que hemos aplicado estilos de padding a dos textos dentro de una tabla. Uno de ellos lleva el atributo padding sólo, y el otro lleva determinados todos los lados del padding. Observa el resultado y si quieres saber cómo lo hemos hecho, sólo debes mirar el código fuente de la página. Estilos de padding.

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.