Modelo de Cajas
4 Modelo de Cajas (Explicacin)
El modelo de cajas o "box model" es la caracterstica ms importante
del lenguaje de hojas de estilos CSS, ya que condiciona el diseo de
todas las pginas web. El modelo de cajas es el comportamiento de
CSS que hace que todos los elementos de las pginas se representen
mediante cajas rectangulares.
Las cajas de una pgina se crean automticamente. Cada vez que se
inserta una etiqueta HTML, se crea una nueva caja rectangular que
encierra los contenidos de ese elemento.
Las cajas de las pginas no son visibles a simple vista porque
inicialmente no muestran ningn color de fondo ni ningn borde. La
siguiente imagen muestra las cajas que forman la pgina web de
http://www.alistapart.com/ despus de forzar a que todas las cajas
muestren su borde:
Los navegadores crean y colocan las cajas de forma automtica, pero
CSS permite modificar todas sus caractersticas. Cada una de las
cajas est formada por seis partes, tal y como muestra la siguiente
imagen:
Representacin tridimensional del box model de CSS
Las partes que componen cada caja y su orden de visualizacin desde
el punto de vista del usuario son las siguientes:
Contenido (content): se trata del contenido HTML del elemento
(las palabras de un prrafo, una imagen, el texto de una lista de
elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el
contenido y el borde.
Borde (border): lnea que encierra completamente el contenido
y su relleno.
Imagen de fondo (background image): imagen que se muestra
por detrs del contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por
detrs del contenido y el espacio de relleno.
Margen (margin): separacin opcional existente entre la caja y
el resto de cajas adyacentes.
El relleno y el margen son transparentes, por lo que en el espacio
ocupado por el relleno se muestra el color o imagen de fondo (si
estn definidos) y en el espacio ocupado por el margen se muestra el
color o imagen de fondo de su elemento padre (si estn definidos). Si
ningn elemento padre tiene definido un color o imagen de fondo, se
muestra el color o imagen de fondo de la propia pgina (si estn
definidos).
Si una caja define tanto un color como una imagen de fondo, la
imagen tiene ms prioridad y es la que se visualiza. No obstante, si la
imagen de fondo no cubre totalmente la caja del elemento o si la
imagen tiene zonas transparentes, tambin se visualiza el color de
fondo. Combinando imgenes transparentes y colores de fondo se
pueden lograr efectos grficos muy interesantes.
4.1 Anchura y Altura
La propiedad CSS que controla la anchura de la caja de los elementos
se denomina width.
La propiedad width no admite valores negativos y los valores en
porcentaje se calculan a partir de la anchura de su elemento padre. El
valor inherit indica que la anchura del elemento se hereda de su
elemento padre. El valor auto, que es el que se utiliza si no se
establece de forma explcita un valor a esta propiedad, indica que el
navegador debe calcular automticamente la anchura del elemento,
teniendo en cuenta sus contenidos y el sitio disponible en la pgina.
El siguiente ejemplo establece el valor de la anchura del elemento
<div> lateral:
#lateral { width: 200px; }
<div id="lateral">
...
</div>
CSS define otras dos propiedades relacionadas con la anchura de los
elementos: min-width y max-width, que se vern ms adelante.
La propiedad CSS que controla la altura de los elementos se
denomina height.
Al igual que sucede con width, la propiedad height no admite valores
negativos. Si se indica un porcentaje, se toma como referencia la
altura del elemento padre. Si el elemento padre no tiene una altura
definida explcitamente, se asigna el valor auto a la altura.
El valor inherit indica que la altura del elemento se hereda de su
elemento padre. El valor auto, que es el que se utiliza si no se
establece de forma explcita un valor a esta propiedad, indica que el
navegador debe calcular automticamente la altura del elemento,
teniendo en cuenta sus contenidos y el sitio disponible en la pgina.
El siguiente ejemplo establece el valor de la altura del elemento
<div> de cabecera:
#cabecera { height: 60px; }
<div id="cabecera">
...
</div>
CSS define otras dos propiedades relacionadas con la altura de los
elementos: min-height y max-height.
4.2 Margen y Relleno
4.2.1 Margen
CSS define cuatro propiedades para controlar cada uno de los
mrgenes horizontales y verticales de un elemento.
Cada una de las propiedades establece la separacin entre el borde
lateral de la caja y el resto de cajas adyacentes:
Las unidades ms utilizadas para indicar los mrgenes de un
elemento son los pxeles (cuando se requiere una precisin total), los
em (para hacer diseos que mantengan las proporciones) y los
porcentajes (para hacer diseos lquidos o fluidos).
El siguiente ejemplo aade un margen izquierdo al segundo prrafo:
.destacado {
margin-left: 2em;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et
elit.
Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras
diam ipsum,
laoreet non, tincidunt a, viverra sed, tortor.</p>
<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis
ultrices,
cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio
non
nisl tincidunt faucibus.</p>
<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in
eros
egestas massa vehicula nonummy. Morbi posuere, nibh ultricies
consectetuer tincidunt, risus turpis laoreet elit, ut tincidunt risus sem
et nunc.</p>
A continuacin se muestra el aspecto del ejemplo anterior en
cualquier navegador:
Algunos diseadores web utilizan la etiqueta <blockquote> para
tabular los contenidos de los prrafos. Se trata de un error grave
porque HTML no debe utilizarse para controlar el aspecto de los
elementos. CSS es el nico responsable de establecer el estilo de los
elementos, por lo que en vez de utilizar la etiqueta <blockquote> de
HTML, debera utilizarse la propiedad margin-left de CSS.
Los mrgenes verticales (margin-top y margin-bottom) slo se pueden
aplicar a los elementos de bloque y las imgenes, mientras que los
mrgenes laterales (margin-left y margin-right) se pueden aplicar a
cualquier elemento, tal y como muestra la siguiente imagen:
Los mrgenes verticales slo se aplican a los elementos de
bloque e imgenes
La imagen muestra el resultado de aplicar los mismos mrgenes a
varios enlaces (elementos en lnea) y varios prrafos (elementos de
bloque). En los elementos en lnea los mrgenes verticales no tienen
ningn efecto, por lo que los enlaces no muestran ninguna separacin
vertical, al contrario de lo que sucede con los prrafos. Sin embargo,
los mrgenes laterales funcionan sobre cualquier tipo de elemento,
por lo que los enlaces se muestran separados entre s y los prrafos
aumentan su separacin con los bordes laterales de su elemento
contenedor.
El siguiente ejemplo utiliza el mismo valor en los cuatro mrgenes de
cada imagen para facilitarsu identificacin y mejorar el diseo general
de la pgina:
El cdigo CSS del ejemplo anterior se muestra a continuacin:
|
|
|
|
|
|
div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
margin-right: .5em;
}
Adems de las cuatro propiedades que controlan cada uno de los
mrgenes del elemento, CSS define una propiedad especial que
permite establecer los cuatro mrgenes de forma simultnea. Estas
propiedades especiales se denominan "propiedades shorthand" y
CSS define varias propiedades de este tipo.
La propiedad que permite definir de forma simultnea los cuatro
mrgenes se denomina margin.
La notacin {1, 4} significa que la propiedad margin admite entre uno
y cuatro valores, con el siguiente significado:
Si solo se indica un valor, todos los mrgenes tienen ese valor.
Si se indican dos valores, el primero se asigna al margen
superior e inferior y el segundo se asigna a los mrgenes
izquierdo y derecho.
Si se indican tres valores, el primero se asigna al margen
superior, el tercero se asigna al margen inferior y el segundo
valor se asigna los mrgenes izquierdo y derecho.
Si se indican los cuatro valores, el orden de asignacin es:
margen superior, margen derecho, margen inferior y margen
izquierdo.
El ejemplo anterior de mrgenes se puede reescribir utilizando la
propiedad margin:
Cdigo CSS original:
div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
margin-right: .5em;
}
Alternativa directa:
div img {
margin: .5em .5em .5m 1em;
}
Otra alternativa:
div img {
margin: .5em;
margin-left: 1em;
}
El comportamiento de los mrgenes verticales es ms complejo de lo
que se puede imaginar. Cuando se juntan dos o ms mrgenes
verticales, se fusionan de forma automtica y la altura del nuevo
margen ser igual a la altura del margen ms alto de los que se han
fusionado.
Fusin automtica de los mrgenes verticales
De la misma forma, si un elemento est contenido dentro de otro
elemento, sus mrgenes verticales se fusionan y resultan en un
nuevo margen de la misma altura que el mayor margen de los que se
han fusionado:
Fusin de los mrgenes de los elementos interiores
Aunque en principio puede parecer un comportamiento extrao, la
razn por la que se propuso este mecanismo de fusin automtica de
mrgenes verticales es el de dar uniformidad a las pginas web
habituales. En una pgina con varios prrafos, si no se diera este
comportamiento y se estableciera un determinado margen a todos los
prrafos, el primer prrafo no mostrara un aspecto homogneo
respecto de los dems.
Motivo por el que se fusionan automticamente los mrgenes
verticales
En el caso de un elemento que se encuentra en el interior de otro y
sus mrgenes se fusionan de forma automtica, se puede evitar este
comportamiento aadiendo un pequeo relleno (padding: 1px) o un
borde (border: 1px solid transparent) al elemento contenedor.
4.2.2 Relleno
CSS define cuatro propiedades para controlar cada uno de los
espacios de relleno horizontal y vertical de un elemento.
Cada una de estas propiedades establece la separacin entre el
contenido y los bordes laterales de la caja del elemento:
Diferencia entre relleno (padding) y margen (margin)
El cdigo HTML y CSS del ejemplo se muestra a continuacin:
.margen {
margin-top: 2em; margin-right: 2em; margin-bottom: 2em; marginleft: 2em;
}
.relleno {
padding-top: 2em; padding-right: 2em; padding-bottom: 2em;
padding-left: 2em;
}
<p class="margen">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi
mi.</p>
<p class="relleno">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi
mi.</p>
Como sucede con los mrgenes, CSS tambin define una propiedad
de tipo "shorthand" llamada padding para establecer los cuatro
rellenos de un elemento de forma simultnea.
La notacin {1, 4} de la definicin anterior significa que la propiedad
padding admite entre uno y cuatro valores, con el mismo significado
que el de la propiedad margin.
Ejemplo:
body {padding: 2em}
/* Todos los rellenos valen 2em */
body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y
derecho = 2em */
body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em,
inferior = 3em, izquierdo = 2em */
body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho =
2em, inferior = 3em, izquierdo = 4em */
