16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS.

Bartolom Sintes Marco

CSS 2: Mrgenes exteriores e interiores

Cualquier elemento de una pgina web puede tener un margen exterior y un margen interior.

La hoja de estilo por defecto de los navegadores establece mrgenes exteriores en bastantes
elementos, especialmente a los elementos de bloque y a los ttulos, y mrgenes itnerior en algunos
elementos. Aunque los mrgenes establecidos en la hoja de estilo por el autor tienen prioridad sobre los
mrgenes establecidos por la hoja de estilo por defecto, el resultado final es la combinacin de todos los
mrgenes establecidos en ambas hojas de estilo.

margin
Margen exterior: la propiedad compuesta margin
El margen exterior de un elemento es el espacio transparente situado alrededor del borde del
elemento, independientemente de que el borde sea o no visible.
La propiedad margin permite establecer el tamao del margen exterior. Como en el caso de las propiedades
border-color, border-width y border-style se pueden escribir de uno a cuatro valores, que se interpretan de
la siguiente manera:
1 valor: este valor se aplica a los cuatro lados
2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a los lados derecho e
izquierdo
3 valores: el primer valor se aplica al lado superior, el segundo a los lados derecho e izquierdo y el tercer
valor al lado inferior
4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho, el tercer valor al lado
inferior y el cuarto al lado izquierdo

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 1/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

1
margin
margin: 20px
border
1

En el modelo de caja CSS, cualquier

elemento (texto, imagen, etc.) est
1 metido dentro de una caja 1
rectangular que puede tener borde,
margen interior y margen exterior.

1 2
margin
margin: 20px 30px
border
1

En el modelo de caja CSS, cualquier

elemento (texto, imagen, etc.) est
2 metido dentro de una caja 2
rectangular que puede tener borde,
margen interior y margen exterior.

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 2/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

1 2 3
margin
margin: 20px 30px 40px
border
1

En el modelo de caja CSS, cualquier

elemento (texto, imagen, etc.) est
2 metido dentro de una caja 2
rectangular que puede tener borde,
margen interior y margen exterior.

1 2 3 4
margin
margin: 20px 30px 40px 10px
border
1

En el modelo de caja CSS, cualquier

elemento (texto, imagen, etc.) est
4 metido dentro de una caja 2
rectangular que puede tener borde,
margen interior y margen exterior.

p {
border: red 2px solid; Esto es un prrafo con borde de color rojo
margin: 20px; y un margen de 20 pixeles alrededor.
} Fjate en que los mrgenes superior e
inferior de dos prrafos seguidos se
solapan.

Esto es un prrafo con borde de color rojo

y un margen de 20 pixeles alrededor.
Fjate en que los mrgenes superior e
inferior de dos prrafos seguidos se
solapan.

p { Esto es un prrafo con borde de color rojo y sin

border: red 2px solid; margen alrededor. Fjate en que los prrafos
margin: 0; seguidos no tienen separacin entre ellos.
} Esto es un prrafo con borde de color rojo y sin
margen alrededor. Fjate en que los prrafos
http://www.mclibre.org/consultar/amaya/css/css_margenes.html 3/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

seguidos no tienen separacin entre ellos.

Mrgenes exteriores: las propiedades margin-top, margin-right, margin-bottom y

margin-left
Las propiedades margin-top, margin-right, margin- margin-top margin-right margin-bottom margin-left
bottom y margin-left permiten establecer el tamao
del margen exterior de forma independiente (arriba,
derecha, abajo e izquierda respectivamente).

margin-top

En el modelo de caja CSS, cualquier

elemento (texto, imagen, etc.) est
margin-left metido dentro de una caja margin-right
rectangular que puede tener borde,
margen interior y margen exterior.

margin-bottom

p { Esto es un prrafo con borde de color rojo y

margin-left: 20px; un margen izquierdo de 20 pixeles. El resto
border: red 2px solid; de mrgenes los elige el navegador.
} Esto es un prrafo con borde de color rojo y
un margen izquierdo de 20 pixeles. El resto
de mrgenes los elige el navegador.

p { Esto es un prrafo con borde de color rojo y sin

margin-left: 0; margen izquierdo. El resto de mrgenes los
border: red 2px solid; elige el navegador.
} Esto es un prrafo con borde de color rojo y sin
margen izquierdo. El resto de mrgenes los
elige el navegador.

Centrar con margin-left y margin-right

Para centrar un elemento de bloque, se utilizan las propiedades margin-left y margin-right con el valor auto.

table { Casilla 1 Casilla 2

margin-left: auto; Casilla 3 Casilla4
margin-right: auto;
}

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 4/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

div { Este prrafo est dentro

width: 50%; de una divisin.
border: black 3px solid;
margin-left: auto;
margin-right: auto;
}

padding
Margen interior: la propiedad compuesta padding
El margen interior de un elemento es el espacio transparente situado entre el elemento y el
borde. Este espacio se puede de definir aunque el elemento no tenga borde. La hoja de estilo por defecto
del navegador aplica mrgenes interiores a muy pocos elementos.
La propiedad padding permite establecer el tamao del margen interior. Como en el caso de las
propiedades border-color, border-width y border-style se pueden escribir de uno a cuatro valores, que se
interpretan de la siguiente manera:
1 valor: este valor se aplica a los cuatro lados
2 valores: el primer valor se aplica a los lados inferior y superior y el segundo a los lados derecho e
izquierdo
3 valores: el primer valor se aplica al lado superior, el segundo a los lados derecho e izquierdo y el tercer
valor al lado inferior
4 valores: el primer valor se aplica al lado superior, el segundo al lado derecho, el tercer valor al lado
inferior y el cuarto al lado izquierdo

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 5/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

1
padding
padding: 20px
border

1
En el modelo de caja CSS, cualquier
elemento (texto, imagen, etc.) est
1 metido dentro de una caja 1
rectangular que puede tener borde,
margen interior y margen exterior.
1

1 2
padding
padding: 20px 30px
border

1
En el modelo de caja CSS, cualquier
elemento (texto, imagen, etc.) est
2 metido dentro de una caja 2
rectangular que puede tener borde,
margen interior y margen exterior.
1

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 6/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

1 2 3
padding
padding: 20px 30px 40px
border

1
En el modelo de caja CSS, cualquier
elemento (texto, imagen, etc.) est
2 metido dentro de una caja 2
rectangular que puede tener borde,
margen interior y margen exterior.

1 2 3 4
padding
padding: 20px 30px 40px 10px
border

1
En el modelo de caja CSS, cualquier
elemento (texto, imagen, etc.) est
4 metido dentro de una caja 2
rectangular que puede tener borde,
margen interior y margen exterior.

p {
border: red 2px solid; Esto es un prrafo con borde de color rojo y
un margen interior de 10 pixeles entre el texto
padding: 10px;
y el borde.
}

Esto es un prrafo con borde de color rojo y

un margen interior de 10 pixeles entre el texto
y el borde.

p { Esto es un prrafo con borde de color rojo y sin

border: red 2px solid; margen interior entre el texto y el borde.
padding: 0;
Esto es un prrafo con borde de color rojo y sin
} margen interior entre el texto y el borde.

Mrgenes interiores: las propiedades padding-top, padding-right, padding-bottom y

padding-left
http://www.mclibre.org/consultar/amaya/css/css_margenes.html 7/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

Las propiedades padding-top, padding-right, padding-top padding-right padding-bottom padding-left

padding-bottom y padding-left permiten
establecer el tamao del margen interior de
forma independiente (arriba, derecha, abajo e
izquierda respectivamente).

padding-top

En el modelo de caja CSS, cualquier

elemento (texto, imagen, etc.) est
padding-left metido dentro de una caja padding-right
rectangular que puede tener borde,
margen interior y margen exterior.

padding-bottom

p { Esto es un prrafo con borde de color rojo y un

border: red 2px solid; margen interior de 10 pixeles entre el texto y el
padding-left: 10px; borde. El resto de mrgenes interiores los elige
} el navegador.
Esto es un prrafo con borde de color rojo y un
margen interior de 10 pixeles entre el texto y el
borde. El resto de mrgenes interiores los elige
el navegador.

p { Esto es un prrafo con borde de color rojo y sin

padding-left: 0; margen interior entre el texto y el borde. El resto
border: red 2px solid; de mrgenes interiores los elige el navegador.
} Esto es un prrafo con borde de color rojo y sin
margen interior entre el texto y el borde. El resto
de mrgenes interiores los elige el navegador.

Superposicin de mrgenes exteriores e interiores

nicamente se superponen los mrgenes exteriores de dos elementos contiguos (horizontal o
verticalmente). Es decir, el espacio entre dos elementos es igual al mayor de los mrgenes exteriores de los
elementos.

p {
border: black 2px solid;
font-weight: bold;
margin: 20px;
}
http://www.mclibre.org/consultar/amaya/css/css_margenes.html 8/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

Este prrafo tiene un margen de 20 pxeles

alrededor suyo. El prrafo siguiente
tambin. El espacio entre ambos prrafos
es de 20 pxeles, no de 40 (20+20).

Este prrafo tiene un margen de 20 pxeles

alrededor suyo. El prrafo anterior
tambin. El espacio entre ambos prrafos
es de 20 pxeles, no de 40 (20+20).

p {
border: black 2px solid; Este prrafo tiene clase e1, es decir, un
font-weight: bold; margen de 30 pxeles alrededor suyo. El
} prrafo siguiente tiene clase e2, es decir,
un margen de 20 pxeles alrededor suyo.
p.e1 { El espacio entre ambos prrafos es de
margin: 30px; 30 pxeles, no de 50 (30+20).
}

p.e2 { Este prrafo tiene clase e2, es decir, un

margin: 20px; margen de 20 pxeles alrededor suyo. El
} prrafo anterior tiene clase e1, es decir, un
margen de 30 pxeles alrededor suyo. El
espacio entre ambos prrafos es de 30
pxeles, no de 50 (30+20).

Los mrgenes interiores de dos elementos contiguos (horizontal o verticalmente) no se superponen,

independientemente de que los elementos lleven borde o no:

p {
margin: 0; Este prrafo tiene un margen interior de 20
padding: 20px; pxeles alrededor suyo. El prrafo siguiente
font-weight: bold; tambin. El espacio entre ambos prrafos es
} de 40 pxeles (20+20).

Este prrafo tiene un margen interior de 20

pxeles alrededor suyo. El prrafo anterior
tambin. El espacio entre ambos prrafos es
de 40 pxeles (20+20).

p {
border: black 2px solid;
margin: 0;
padding: 20px;
font-weight: bold;
}

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 9/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

Este prrafo tiene un margen interior de 20

pxeles alrededor suyo. El prrafo siguiente
tambin. El espacio entre ambos prrafos es
de 40 pxeles (20+20).

Este prrafo tiene un margen interior de 20

pxeles alrededor suyo. El prrafo anterior
tambin. El espacio entre ambos prrafos es
de 40 pxeles (20+20).

Los mrgenes exteriores e interiores de dos elementos contiguos (horizontal o verticalmente) tampoco se
superponen, independientemente de que los elementos lleven borde:

p {
border: black 2px solid; Este prrafo tiene clase e1, es decir, un
font-weight: bold; margen interior de 20 pxeles alrededor
} suyo. El prrafo siguiente tiene clase e2, es
decir, un margen exterior de 20 pxeles
p.e1 { alrededor suyo. El espacio entre ambos
prrafos es de 40 pxeles (20+20).
margin: 0;
padding: 20px;
}
Este prrafo tiene clase e2, es decir, un
p.e2 { margen exterior de 20 pxeles alrededor
margin: 20px; suyo. El prrafo anterior tiene clase e1, es
padding: 0; decir, un margen interior de 20 pxeles
} alrededor suyo. El espacio entre ambos
prrafos es de 40 pxeles (20+20).

p {
font-weight: bold; Este prrafo tiene clase e1, es decir, un
} margen interior de 20 pxeles alrededor
suyo. El prrafo siguiente tiene clase e2, es
p.e1 { decir, un margen exterior de 20 pxeles
alrededor suyo. El espacio entre ambos
margin: 0;
prrafos es de 40 pxeles (20+20).
padding: 20px;
}
Este prrafo tiene clase e2, es decir, un
p.e2 {
margen exterior de 20 pxeles alrededor
margin: 20px;
suyo. El prrafo anterior tiene clase e1, es
padding: 0; decir, un margen interior de 20 pxeles
} alrededor suyo. El espacio entre ambos
prrafos es de 40 pxeles (20+20).

Los mrgenes exteriores e interiores de dos elementos anidados tampoco se superponen,

independientemente de que los elementos lleven borde:

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 10/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

div {
border: red 2px solid;
padding: 20px Este prrafo tiene un margen exterior
} de 20 pxeles alrededor suyo. El
prrafo est dentro de una divisin con
p { margen interior de 20 pxeles. La
border: black 2px solid; separacin entre bordes es de 40
margin: 20px; pxeles (20+20).
padding: 0;
font-weight: bold;
}

div {
padding: 20px
} Este prrafo tiene un margen exterior
de 20 pxeles alrededor suyo. El prrafo
p { est dentro de una divisin con margen
margin: 20px; interior de 20 pxeles. La separacin
padding: 0; entre bordes es de 40 pxeles (20+20).
font-weight: bold;
}

Superposicin de mrgenes exteriores e interiores de <html> y <body>

Los mrgenes exteriores e interiores de <html> y <body> no se superponen ya que son elementos
anidados, como puede comprobarse en la siguiente pgina de ejemplo o en las siguientes capturas de
pantalla de esa pgina en Firefox. En esa pgina, tanto <html> como <body> tienen un margin y padding de
10px, por lo que espacio alrededor del contenido es de 40px en total (10px+10px+10px+10px).

En las capturas anteriores:

los 10px exteriores (de color de fondo azul) corresponden al margin de <html>,
los siguientes 10px (de color de fondo azul) corresponden al padding de <html>,
los siguientes 10px (de color de fondo azul) corresponden al margin de <body>,
y los ltimos 10px (de color de fondo amarillo) corresponden al padding de <body>.

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 11/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

Es importante sealar que la imagen de fondo ( ) de la pgina no se coloca en la esquina superior

izquierda de la ventana y se repite a partir de esa posicin, sino que se coloca desplazada 10px a la
derecha y hacia abajo de la esquina superior izquierda y se repite a partir de esa posicin debido al margin
de 10px de <html>, como se comenta en la leccin de fondos.

Los navegadores aplican de forma predeterminada algunos de estos mrgenes, como se observa en el
ejemplo siguiente. El borde de color teal que se ve en el lado izquierdo, superior y derecho se debe a
mrgenes de algunos elementos.

html { html {
background: url("cuadricula.png") teal; }
}
body {
}
body {
background: url("cuadricula.png") white; pre {
} }

pre {
}

Concretamente, los navegadores aplican margin en px a <body>. Para verlo, lo podemos poner a cero:

html { html {
background: url("cuadricula.png") teal; }
}
body {
margin: 0;
body { }
margin: 0;
background: url("cuadricula.png") white; pre {
}
}

pre {
}

El margen superior se debe al margin (en em) del elemento <pre>. Para verlo, lo podemos poner a cero:
html {
html { }
background: url("cuadricula.png") teal;
} body {
margin: 0;
}
body {
margin: 0; pre {
background: url("cuadricula.png") white; margin: 0;
} }

pre {
margin: 0;
}

ltima modificacin de esta pgina: 28 de octubre de 2016

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 12/13
16/10/2017 Mrgenes exteriores e interiores. CSS 2. Pginas web HTML y hojas de estilo CSS. Bartolom Sintes Marco

Esta pgina forma parte del curso Pginas web HTML y hojas de estilo CSS por Bartolom Sintes Marco
que se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional
(CC BY-SA 4.0).

http://www.mclibre.org/consultar/amaya/css/css_margenes.html 13/13