Propiedades Margin y Padding CSS

Hola a todos, hoy os explicare como usar las propiedades margin y padding de CSS, que son muy usadas a la hora del posicionamiento.

Margin y padding permiten controlar el espacio entre elementos.

Margin controla el espacio externo, separando unos elementos de otros.

Padding controla el espacio interno, separando el texto con la caja del elemento. Si ponemos estas propiedades, afectara a todos los lados: la parte de arriba, la de abajo, la de la izquierda y derecha. Si queremos controlar el espacio de una zona concreta debemos poner a estas propiedades los sufijos, -top (arriba), -bottom (abajo), -left (izquierda) y -right (derecha).

Las unidades de medida que se suele utilizar para estas propiedades son los pixeles (si es poco espacio) y los porcentajes. Veamos algunos ejemplos: Primero veremos un ejemplo de margin y después de padding.

.m_izquierdo_superior{
   margin-left: 20%;
   margin-top: 15px;
   border: solid 1px;
}
.m_derecho_inferior{
   margin-right: 20%;
   margin-bottom: 15px;
   border: solid 1px;
}

margin 2

Si queremos modificar, varias posiciones de una forma mas rápida podemos hacer lo siguiente:

.margen {
   margin: 15px 5px 10px 5px;
   border: solid 1px;
}

margen 3

Como vemos en el archivo CSS, hay 4 medidas distintas, la primera es el margen superior, el resto sigue las agujas del reloj.

Ahora vemos algún ejemplo de padding.

.padding {
   padding-top: 5px;
   padding-left: 7px;
   border: solid 1px;
}

padding

Si queremos modificar, varias posiciones de una forma mas rápida podemos hacer lo siguiente:

.padding {
   padding: 10px 5px 12px 7px;
   border: solid 1px;
}

padding 2

Espero que os sea de ayuda.

Etiquetas

4 comments

  1. Conocía las etiquetas, lo que no sé es cómo ayudan para el posicionamiento.

  2. Margin es el mas util a la hora del posicionamiento, ya que nos permite mover a placer las partes de nuestros elementos, sea el que sea, de una forma facil y el padding es util para controlar el espacio interior de elementos contendores (aunque tb de otros elementos), esteticamente queda muy mal que un texto este pegado a un borde. Espero que te haya sido de ayuda y gracias por comentar.

  3. Querido amigo Disco duro esta entrada les vendría estupendamente a algunos de nuestros compañeros de la comunidad. y creo que si te das una vuelta por los blogs de los compañeros podrás observar que necesitamos tu ayuda para mejorar ciertos detalles de nuestros sencillos blogs.Un cordial Saludo
    Traffic-club
    Cambiando el paradigma (dando ideas :)

  4. Está bien, lo cierto es que no sabía como controlar el espacio entre los elementos, Gracias y un saludo de TRAFICC CLUB Y EL TALCO NEGRO.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *