Padding y Margin en CSS

En el lenguaje CSS existen estos dos atributos para cada elemento html en una página web, y debido a que los funcionamientos de estos atributos es un tanto similar puede existir una alguna confusión a la hora de utilizarlos. Si bien esta claro que cada atributo crea un espacio alrededor del elemento pero cada uno lo hace a su manera.

Padding.- Este atributo crea un espacio vacío dentro del elemento, y su sintaxis es la siguiente:

elemento {
  padding: 5em 5px 10px 1.5em;
  padding: 10px 20px;
}

que la primer linea podría desglozarse de la siguiente manera:

elemento {
  padding: top right bottom left;
}

mientras la segunda linea podría desglozarse de la siguiente manera:

elemento {
  padding: top-bottom left-right;
}

Por lo que lo siguiente es exactamente lo mismo para la primer linea:

elemento {
  padding-top:5em;
  padding-right:5px;
  padding-bottom:10px;
  padding-left:1.5em;
}

Y para la segunda

elemento {
  padding-top:10px;
  padding-right:20px;
  padding-bottom:10px;
  padding-left:20px;
}

Un ejemplo práctico:

padding:5px 10px 1.5em 2em;

padding:0;

Margin.- El margin crea un espacio vacío pero por fuera del elemento, y su sintaxis es la siguiente:

elemento {
  margin: 5em 5px 10px 1.5em;
  margin: 10px 20px;
}

que podría desglozarse la primer linea de la siguiente manera:

elemento {
  margin: top right bottom left;
}

que podría desglozarse la segunda linea de la siguiente manera:

elemento {
  margin: top-bottom left-right;
}

Por lo que lo siguiente es exactamente lo mismo que la primer linea:

elemento {
  margin-top:5em;
  margin-right:5px;
  margin-bottom:10px;
  margin-left:1.5em;
}

Por lo que lo siguiente es exactamente lo mismo que la segunda linea:

elemento {
  margin-top:10px;
  margin-right:20px;
  margin-bottom:10px;
  margin-left:20px;
}

height:50px;
margin:5px 10px 1.5em 2em;

height:50px;
margin:0px;

Los atributos anteriores, pueden tener como valores cualquier unidad absoluta de CSS(%,px,em) o la palabra "auto", sin comillas.

Para tener una mejor idea de como es que funcionan estos dos atributos, a continuación verás un ejemplo de la utilización unicamente del padding:

<div style="background:#6699FF;width:100%;">
    <div style="padding:20px;background:#3F80FF;width:150px;">
        padding:20px;
    </div>
</div>

padding:20px;

Como puedes observar, en el ejemplo anterior hay un contenedor con un ancho del 100%, lo que hace que tome el ancho mas largo que pueda. Despues dentro de el esta otro contenedor div con diferente color de fondo. El texto dentro de este ultimo esta un tanto separado del borde, pues el padding de 20px, crea un espacio vacio entre el texto y el borde del contenedor.

Ahora verás el mismo ejemplo pero en vez de utilizar el padding utilizaremos ahora el margin, para apreciar de mejor manera que el funcionamiento es totalmente distinto:

<div style="background:#6699FF;width:100%;">
    <div style="margin:auto;background:#3F80FF;width:150px;">
        margin:auto;
    </div>
</div>

margin:auto;

Esta vez el texto no esta separado de los bordes de su contenedor, mientras que el bloque que contiene el texto si esta separado del bloque exterior. Algo a destacar del ejemplo anterior es que esta totalmente centrado, pues con el valor "auto" puedes centrar "contenedores"(Algo que no funciona en IE).

Esta claro que se separa de la izquierda, pero para que se pueda observar como actua el margin por arriba y por debajo, el bloque exterior debe tener una propiedad llamada float y con el fin de observar como actua hacia la derecha no tendrá la propiedad width de esa manera el ancho sera lo menor que pueda:

<div style="background:#6699FF;float:left;">
    <div style="margin:20px;background:#3F80FF;">
        margin:20px;
    </div>
</div>

margin:20px;

Esta claro ¿no?

Con el padding y el margin tambien pueden crearse contenedores mas felxibles(en cuanto diseño) que las tablas, pero lucen de la misma manera.

Un ejemplo de la utilizacion es lo siguiente, colocaremos un contenedor div con la dicha propiedad float, sin el atributo width, con un color de fondo y cuatro contenedores div dentro de el con diferente color de fondo:

<div style="background:#6699FF;float:left;">
    <div style="margin:20px;background:#3F80FF;">
        margin:20px;
    </div>
    <div style="margin:20px;background:#3F80FF;">
        margin:20px;
    </div>
    <div style="margin:20px;background:#3F80FF;">
        margin:20px;
    </div>
    <div style="margin:20px;background:#3F80FF;">
        margin:20px;
    </div>
</div>

margin:20px;
padding:10px;

El width o ancho del contenedor exterior es el menor que puede tomar, al no estar definido. Por lo que los contenedores internos, como normalmente sucede cuando no caben los elementos en linea, se desplazan hacia abajo.

Algo que se soluciona agregando la propiedad float a los elementos internos y sumando los anchos de los elementos internos junto con sus paddings y margins:

(margin-left + margin-rigth) + (padding-left + padding-right) + width
(20px + 20px) + (10px + 10px) + 150px
40px + 20px + 150px = ancho total de un bloque interno
210px + 210px + 210px + 210px = ancho que debe tener el bloque exterior para que sea en linea horizontal
210px + 210px = ancho que debe tener para obtener un cuadrado

Cuadrado:

<div style="width:420px;float:left;background:#6699FF;">
    <div style="float:left;margin:20px;padding:10px;background:#3F80FF;width:150px;">
        margin:20px;
        float:left;
        padding:10px;
    </div>
    <div style="float:left;margin:20px;padding:10px;background:#3F80FF;width:150px;">
        margin:20px;
        float:left;
        padding:10px;
    </div>
    <div style="float:left;margin:20px;padding:10px;background:#3F80FF;width:150px;">
        margin:20px;
        float:left;
        padding:10px;
    </div>
    <div style="float:left;margin:20px;padding:10px;background:#3F80FF;width:150px;">
        margin:20px;
        float:left;
        padding:10px;
    </div>
</div>

margin:20px;
float:left;
padding:10px;

Pues no es del todo cuadrado, verdad? necesita un ajuste pues los margenes de abajo se suman con los de la segunda linea y los margenes de la derecha se suman también con los de la segunda columna. Solo modificaremos a:

width:400; /* contenedor */
margin:20px 0px 20px 20px; /* Primer bloque */
margin:20px 20px 20px 20px; /* Segundo bloque */
margin:0px 0px 20px 20px; /* Tercer bloque */
margin:0px 20px 20px 20px; /* Cuatro bloque */

El primer y el tercer bloque tienen 0px de margin a la derecha, mientras que los bloques de la fila de abajo, tercer y cuarto bloque tienen un margin hacia arriba de 0px. En cuanto a el ancho del contenedor externo, le restamos 20px, pues el margin a la derecha que sobraba por parte del primer y el tercer bloque lo eliminamos. Igual para los margenes de arriba de la linea de abajo lo eliminamos, pero con el height no hay problema.

<div style="width:400px;float:left;background:#6699FF;">
    <div style="float:left;margin:20px 0px 20px 20px;width:150px;">
        float:left;
        padding:10px;
    </div>
    <div style="float:left;margin:20px 20px 20px 20px;padding:10px;background:#3F80FF;width:150px;">
        float:left;
        padding:10px;
    </div>
    <div style="float:left;margin:0px 0px 20px 20px;padding:10px;background:#3F80FF;width:150px;">
        float:left;
        padding:10px;
    </div>
    <div style="float:left;margin:0px 20px 20px 20px;padding:10px;background:#3F80FF;width:150px;width:150px;">
        float:left;
        padding:10px;
    </div>
</div>

float:left;
padding:10px;

Así pues, para una linea horizontal utilizaríamos los siguientes margenes:

margin:20px 10px 20px 20px; /* para el primer bloque */
margin:20px 10px; /* para los bloques internos */
margin:20px 20px 20px 10px; /* para el ultimo bloque */
width:780px; /* Para el bloque exterior */

Para el bloque exterior se haría la siguiente sumatoria:

/* Ancho total de un solo bloque */
(margin-left + margin-right) + (padding-left+padding-right) + width
(20px + 20px) + (10px + 10px) + 150px
40px + 20px + 150px = 210px /* ancho total*/
210px + 210px + 210px + 210px = 840px
/* A lo que le restamos tres bordes internos que también sumamos, pero que en realidad no existen */
840px - 20px - 20px - 20px = 780px

<div style="width:780px;float:left;background:#6699FF;">
    <div style="float:left;margin:20px 10px 20px 20px;padding:10px;background:#3F80FF;width:150px;">
        float:left;
        padding:10px;
    </div>
    <div style="float:left;margin:20px 10px;padding:10px;background:#3F80FF;width:150px;">
        float:left;
        padding:10px;
    </div>
    <div style="float:left;margin:20px 10px;padding:10px;background:#3F80FF;width:150px;">
        float:left;
        padding:10px;
    </div>
    <div style="float:left;margin:20px 20px 20px 10px;padding:10px;background:#3F80FF;width:150px;">
        float:left;
        padding:10px;
    </div>
</div>

float:left;
padding:10px;

Que tal, es un lío ¿no?. Pues para eso podemos utilizar las unidades absolutas de CSS, como por ejemplo el porcentaje(%). Bien tenemos el contenedor de un tamaño indefinido, sea cual sea es el 100%. Ahora le queremos meter cuatro bloques internos los cuatro del mismo tamaño.

Como es un contenedor del 100% lo dividimos en cuatro, 25%. Bien ahora si metemos ese ancho a los contenedores se irá al menos uno para abajo:

<div style="width:100%;float:left;background:#6699FF;">
    <div style="width:25%;float:left;margin:20px 10px 20px 20px;padding:10px;background:#3F80FF;">
        float:left;
        padding:10px;
    </div>
    <div style="width:25%;float:left;margin:20px 10px;padding:10px;padding:10px;background:#3F80FF;">
        float:left;
        padding:10px;
    </div>
    <div style="width:25%;float:left;margin:20px 10px;padding:10px;padding:10px;background:#3F80FF;">
        float:left;
        padding:10px;
    </div>
    <div style="width:25%;float:left;background:#3F80FF;margin:20px 20px 20px 10px;padding:10px;">
        float:left;
        padding:10px;
    </div>
</div>

float:left;
padding:10px;

¿Por que? pues el 25% del ancho de contenedor no contempla el padding ni el margin, es decir, es el 25% mas el padding y mas el margin. Pero en base a ese 25% crearemos bloques dentro de los bloques, y esos si tendran contemplado el padding y el margin:

<div style="width:100%;float:left;background:#6699FF;">
    <div style="width:25%;float:left;">
        <div style="margin:20px 10px 20px 20px;padding:10px;background:#3F80FF;">
            padding:10px;
        </div>
    </div>
    <div style="width:25%;float:left;">
        <div style="margin:20px 10px;padding:10px;padding:10px;background:#3F80FF;">
            padding:10px;
        </div>
    </div>
    <div style="width:25%;float:left;">
        <div style="margin:20px 10px;padding:10px;padding:10px;background:#3F80FF;">
            padding:10px;
        </div>
    </div>
    <div style="width:25%;float:left;">
        <div style="background:#3F80FF;margin:20px 20px 20px 10px;padding:10px;">
            padding:10px;
        </div>
    </div>
</div>

float:left;
padding:10px;

Por ultimo que tal si creamos un ultimo ejemplo, un contenedor del tamaño indefinido con un bloque grande dentro y otros tres mas abajo:
Básicamente es lo mismo, solo cambie el porcentaje, el mayor tiene el porcentaje del 100%, y los tres de abajo tienen un porcentaje de 33.33%. Además el bloque grande no tiene margin hacia abajo:

<div style="width:100%;float:left;background:#6699FF;">
    <div style="width:100%;float:left;">
        <div style="margin:20px 20px 0px 20px;padding:10px;background:#3F80FF;">
            padding:10px;
        </div>
    </div>
    <div style="width:33.33%;float:left;">
        <div style="margin:20px 10px;padding:20px;padding:20px;background:#3F80FF;">
            padding:10px;
        </div>
    </div>
    <div style="width:33.33%;float:left;">
        <div style="margin:20px 10px;padding:10px;padding:10px;background:#3F80FF;">
            padding:10px;
        </div>
    </div>
    <div style="width:33.33%;float:left;">
        <div style="background:#3F80FF;margin:20px 20px 20px 10px;padding:10px;">
            padding:10px;
        </div>
    </div>
</div>

float:left;
padding:10px;

Y con un poco de estilo, tenemos la maquetacion en CSS de una galería de imagenes:

<div style="width:100%;float:left;background:#2E353D;">
    <div style="width:100%;float:left;">
        <div style="border-top:1px dotted #445566;border-bottom:1px dotted #445566;margin:10px 10px 0px 10px;padding:10px;background:#20272F;">
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9Qln5aITRDfSuWxeuM0uPLRbvQEHVC-Xif1kjCa0VmBAZiYaA_BEAhmSrelVIyKWgCeNkkfbnX6E-CvYzS1uCbapVwn8BkjGYOoIVx0uHmRbuPy-fQvoC1TVtrKn4KYv8YzxmhBYfUyL/s400/Panorama_sin_t%C3%ADtulo3.jpg' style='width:100%;'/>
        </div>
    </div>
    <div style="width:33.33%;float:left;">
        <div style="text-align:center;margin:10px 5px 10px 10px;padding:10px;padding:10px;background:#40474F;">
            &lt;Anterior
        </div>
    </div>
    <div style="width:33.33%;float:left;">
        <div style="text-align:center;margin:10px 5px;padding:10px;background:#40474F;">
            Descargar
        </div>
    </div>
    <div style="width:33.33%;float:left;">
        <div style="text-align:center;background:#40474F;margin:10px 10px 10px 5px;padding:10px;">
            Siguiente&gt;
        </div>
    </div>
</div>

<Anterior

Descargar

Siguiente>

Espero no haber empeorado las cosas xD!!

Hacker of the Web

Padding y Margin en CSS

Deja tu huella y comenta!

Sólo 1 comentario !

Síguenos por:

Explora la web

Entradas Recientes

Secciones

Acerca de..

Enlazame!

Imagen

Mis Blogs

Siguenos!!