InicioCrear web desde cero › Margen y padding con estilos CSS

Margen y padding con estilos CSS

¿Que es el margen? ¿Y el padding? ¿Para que sirven? En esta lección responderemos todas estas preguntas y veremos ejemplos prácticos.

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.

Nota: siempre debes poner la unidad luego del valor, es decir, si quieres un margen de 10 píxeles debes asegurarte de poner "px" luego del 10, de esta forma: margin:10px;

 

Padding CSS

El padding a primera vista es igual al margin, incluso en determinadas ocaciones podremos usar las dos y conseguiremos el mismo resultado visual, 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 margin se hubiera creado el espacio fuera 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