Margen y padding con estilos CSS

En la lección pasada vimos como centrar texto con CSS, ahora veremos como aplicar margenes y paddings al contenido, empezaremos por la propiedad margin.

Margin o margen CSS

¿Para que sirve? margin sirve para establecer la separacion entre dos elementos, aunque parezca complicado de entender, no lo es. Supongamos que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la propiedad margin podremos separar esos dos elementos, ¿asi esta mejor eh?.

Se utiliza así:

.clase{ margin: 10px ;}

Haciendo eso separaremos 10px la imagen del texto, ojo que estamos separando 10px de arriba, derecha, abajo e izquierda, si queremos separar 10px solo de la izquierda, hacemos esto:

.clase{ margin: 10px 0px 0px 0px}

Como vemos, podemos aplicar margenes por orientación, los valores se aplican siguiendo el sentido de las agujas del reloj, es decir:

.clase{margin: arriba derecha abajo izquierda;}

o también podemos hacerlo así:

.clase{

         margin-top: 0px;

         margin-right: 0px;

         margin-bottom: 0px;

         margin-left: 10px;

}

Claro que no hace falta especificar todas las orientaciones, solo basta con poner la que queremos especificar.

Padding CSS

El padding a primera vista es igual a margin, incluso en determinadas ocaciones podremos usar las dos y conseguiremos el mismo efecto, la diferencia esta en que padding no separa dos elementos, mas bien crea un espacio dentro uno de ellos, por ejemplo, si tenemos un bloque con texto dentro y una imagen al lado bien pegada, al aplicarle padding al bloque con texto, los elementos siguen pegados, pero vemos un espacio al igual que si usaramos la propiedad margin, solo que esta vez se creo un espacio dentro del bloque con texto dentro.

La forma de aplicarlo es igual que margin, solo que esta vez el nombre será padding:

.clase{ padding: 10px; }

,clase{ padding: 10px 0px 0px 0px; }

.clase{

         padding-top: 0px;

         padding-right: 0px;

         padding-bottom: 0px;

         padding-left: 10px;

}

Como vemos, su uso es idéntico a margin.

Ahora vamos a aplicar lo que aprendimos en nuestra pagina web, la que venimos creando en el curso, lo que haremos es aplicar un padding a la imagen para que quede centrada igual que el texto, vamos a aplicar un estilo a la etiqueta img desde el archivo estilos.css de esta forma:

img{ padding-left:320px }

esto modificará solo a la etiqueta img:

y la pagina se verá así:

Eso es todo por esta lección, lo que sigue es aprender a aplicar estilos CSS a listas.

Siguiente lección: aplicar estilos CSS en listas