CSS Box

Modelo de cajas en CSS.
Estructura
El lenguaje CSS trata a todos los elementos como si estuvieran contenidos en cajas
rectangulares. Es lo que se llama el modelo de cajas. Cada una de estas cajas puede tener un
borde que lo delimita, un margen interno y un margen externo. Podemos también definir otra
serie de propiedades como su altura, su anchura, forma de verse, colores de fondo, etc. En este
tema veremos los márgenes y bordes que pueden tener estas cajas, dejando para temas
posteriores otra serie de propiedades. Si normalmente al ver una página Web no vemos una
caja en cada párrafo o en cada imagen, es porque la mayoría de las veces los valores de los
márgenes y del borde son cero o transparentes, (valores por defecto) pero a cualquier
elemento definido mediante una etiqueta HTML se le podrían aplicar los bordes y márgenes
que vamos a explicar a continuación.
Margen, borde y relleno
de dentro a afuera, la estructura de una caja sería la siguiente:
• Contenido: Es el texto, la imagen, o el elemento al que hace referencia la etiqueta HTML
• Relleno (padding): Es un margen alrededor del contenido que forma parte de la propia caja.
• Borde (border): Es el borde externo de la caja, y la delimita.
• Margen (margin): Es un margen exterior a la caja, que aunque no forma parte de la caja, deja
un espacio entre ésta y los otros elementos que la rodean.
Las propiedades padding, border, margin indican respectivamente el relleno, el borde, y el

margen externo. Cada una de ellas puede referirse a los cuatro lados de la caja mediante las
palabras top (superior), bottom (inferior), left (izquierda), y right (derecha).
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno
(padding) se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado
por el margen (margin) se muestra el color o imagen de fondo de su elemento padre (el
elemento que lo contiene). Al igual que las etiquetas que las definen, las cajas pueden estar
anidadas, una dentro de otra, lo cual puede crear un sistema bastante complejo para la
estructura de la página. En CSS el relleno, el borde y el margen externo se delimitan mediante
propiedades que iremos viendo en las siguientes páginas de este manual.
Bordes
Podemos definir el borde de cualquier elemento HTML mediante las propiedades que vamos a
ver a continuación. Podemos definir además distintas propiedades para cada uno de los cuatro
lados del elemento. Las propiedades las veremos en grupos de cuatro, en ellas se distingue
mediante las palabras:
• top: el lado superior.
• right: el lado derecho.
• bottom: el lado inferior.
• left: el lado izquierdo.
Propiedades border-width.
Las propiedades border-width controlan la anchura de los bordes, y su definición es la

siguiente: Los valores de la anchura de los bordes se pueden indicar mediante una medida o
mediante las palabras clave thin (borde delgado), medium (borde normal) y thick (borde
ancho).
Los valores de la anchura de los bordes se pueden indicar mediante una medida o mediante las
palabras clave thin (borde delgado), medium (borde normal) y thick (borde ancho).
También podemos establecer la anchura de los bordes mediante la utilización de una

propiedad de tipo "shorthand", que permiten indicar las propiedades anteriores de forma
resumida:
El número de valores indicado significa lo siguiente:
• Si se indica un valor: Se aplica a los cuatro bordes.
• Si se indican dos valores: El primero se aplica al borde superior e inferior, y el segundo al

borde izquierdo y derecho.
• Si se indican tres valores: El primero se aplica al borde superior, el segundo a los bordes
izquierdo y derecho, y el tercero al borde inferior.
• Si se aplican cuatro valores: El orden de aplicación es superior, derecho, inferior, izquierdo.
Propiedades border-color.
Las propiedades border-color controlan el color de los bordes, y su definición es la siguiente:
La palabra clave transparent crea un margen transparente.
También podemos establecer el color de los bordes mediante la utilización de una propiedad
de tipo "shorthand", que permiten indicar las propiedades anteriores de forma resumida:
La propiedad border-color permite indicar entre uno y cuatro valores, que pueden ser
definiciones de color o la palabra clave transparent. El número de valores indicado se
interpreta exactamente igual que para la propiedad anterior (border-width).
Propiedades border-style.
Las propiedades border-style permite establecer el estilo de los bordes, y su definición es la

siguiente:
Los valores para esta propiedad sólo pueden indicarse mediante alguna de las palabras
reservadas. El estilo por defecto es none, lo que hace que los elementos no muestren ningún
borde visible, a menos que se establezca explícitamente un estilo de borde.
También podemos establecer el estilo de los bordes mediante la utilización de una propiedad
de tipo "shorthand", que permiten indicar las propiedades anteriores de forma resumida:
La propiedad border-style permite indicar entre uno y cuatro valores, que serán las palabras
claves indicadas. El número de valores indicado se interpreta exactamente igual que para las
propiedades anteriores.
Propiedad border tipo "shorthand”
Mediante la propiedad border de tipo "shorthand" se puede establecer de forma directa el

valor de todos los atributos de todos los bordes. su definición es la siguiente
Propiedad border tipo "shorthand”
En los valores de la propiedad escribiremos la medida, el color, y el estilo, aunque se

recomienda hacerlo en este orden, en cualquier otro orden también es válido. También se
pueden utilizar las propiedades border-top, border-right, border-bottom, border-left para
referirse a uno sólo de los bordes. La forma de escribir los valores de estas propiedades es
idéntica que en la propiedad border. Cuando los cuatro bordes no son idénticos pero sí muy
parecidos, se puede utilizar la propiedad border para establecer de forma directa los atributos
comunes de todos los bordes y posteriormente especificar para cada uno de los cuatro bordes
sus propiedades particulares: Hay que tener en cuenta que como el valor por defecto de la
propiedad border-style es none, si una propiedad shorthand no establece explícitamente el
estilo de un borde, el elemento no muestra ese borde.
Márgenes
El margen interno "padding”
El margen interno está entre el contenido y el borde, es transparente, y conserva algunas

propiedades de la caja, como color de fondo, visibilidad, etc.
Propiedades padding
Al igual que ocurre con el borde, hay cuatro propiedades padding para controlar los márgenes
internos, que se corresponden con los cuatro lados de la caja. Su definición es:
propiedad padding tipo "shorthand”
También podemos establecer el relleno o padding mediante la utilización de una propiedad de

tipo "shorthand", que permiten indicar las propiedades anteriores de forma resumida:
Al igual que sucede en las propiedades "shorthand" de los bordes, esta propiedad puede tener
entre uno y cuatro valores, con el mismo significado que en los casos anteriores. estos son:
• Si se indica un valor: Se aplica a los cuatro márgenes.
• Si se indican dos valores: El primero se aplica al margen superior e inferior, y el segundo al

margen izquierdo y derecho.
• Si se indican tres valores: El primero se aplica al margen superior, el segundo a los márgenes
izquierdo y derecho, y el tercero al margen inferior.
• Si se aplican cuatro valores: El orden de aplicación es superior, derecho, inferior, izquierdo.
El margen externo: margin
El margen externo es el espacio que dejamos entre el borde y los demás elementos
adyacentes. No forma parte de la caja, aunque sí hay que tenerlo en cuenta para organizar los
elementos de la página. En ocasiones tiene comportamientos un tanto específicos que
veremos más adelante.
propiedades margin
Al igual que ocurre con el borde y el relleno (padding), hay cuatro propiedades margin para
controlar los márgenes externos, que se corresponden con los cuatro lados de la caja. Su
definición es:
El margen externo: margin Las unidades más utilizadas para indicar los márgenes de un
elemento son los píxeles (cuando se requiere una precisión total), los em (para hacer diseños
que mantengan las proporciones) y los porcentajes (para hacer diseños líquidos o fluidos). El
valor auto sólo tiene efecto con los márgenes horizontales, y deja todo el margen posible al
lado indicado, siempre dentro del elemento contenedor. Así si queremos llevar la caja a la
derecha, indicaremos margin-left: auto y al contrario si la queremos llevar a la izquierda. La
aplicación a la vez de marginleft: auto y margin-right: auto nos centra la caja respecto de su
elemento contenedor.
El margen externo: margin propiedad margin tipo "shorthand”
También podemos establecer el margen mediante la utilización de una propiedad de tipo

"shorthand", que permiten indicar las propiedades anteriores de forma resumida:
Al igual que sucede en las propiedades "shorthand" del relleno (padding), esta propiedad
puede tener entre uno y cuatro valores, con el mismo significado que en el caso anterior.
Tratamiento de los márgenes verticales.
Los márgenes verticales sólo se pueden aplicar a elementos de bloque e imágenes, por lo que
elementos tales como enlaces, etiquetas de texto en negrita o en cursiva y otro tipo de
etiquetas que son elementos en línea, sólo aceptan los márgenes horizontales.
FUSIÓN DE MÁRGENES: Cuando se juntan dos o más márgenes verticales, se fusionan de

forma automática y la altura del nuevo margen será igual a la altura del margen más alto de los
que se han fusionado, según el siguiente esquema:
Tratamiento de los márgenes verticales.
Igualmente, si un elemento está contenido dentro de otro elemento, sus márgenes verticales
se fusionan y resultan en un nuevo margen de la misma altura que el mayor margen de los que
se han fusionado:
Aunque en principio puede parecer un comportamiento extraño, la razón por la que se

propuso este mecanismo de fusión automática de márgenes verticales es el de dar uniformidad
a las páginas web habituales. En una página con varios párrafos, si no se diera este
comportamiento y se estableciera un determinado margen a todos los párrafos, el primer
párrafo no mostraría un aspecto homogéneo respecto de los demás.
En el caso de un elemento que se

encuentra en el interior de otro y sus
márgenes se fusionan de forma
automática, se puede evitar este
comportamiento añadiendo un pequeño
relleno (padding) o un borde de estilo
transparente al elemento contenedor.

CSS Box

Cargado por

Copyright:

Formatos disponibles

CSS Box

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS Box

Cargado por

Copyright:

Formatos disponibles

Modelo de cajas en CSS.

Margen, borde y relleno

de dentro a afuera, la estructura de una caja sería la siguiente:

• Contenido: Es el texto, la imagen, o el elemento al que hace referencia la etiqueta HTML

• Borde (border): Es el borde externo de la caja, y la delimita.

Las propiedades padding, border, margin indican respectivamente el relleno, el borde, y el

• top: el lado superior.

• right: el lado derecho.

• bottom: el lado inferior.

• left: el lado izquierdo.

Las propiedades border-width controlan la anchura de los bordes, y su definición es la

También podemos establecer la anchura de los bordes mediante la utilización de una

• Si se indica un valor: Se aplica a los cuatro bordes.

• Si se indican dos valores: El primero se aplica al borde superior e inferior, y el segundo al

• Si se aplican cuatro valores: El orden de aplicación es superior, derecho, inferior, izquierdo.

Las propiedades border-color controlan el color de los bordes, y su definición es la siguiente:

La palabra clave transparent crea un margen transparente.

Las propiedades border-style permite establecer el estilo de los bordes, y su definición es la

Mediante la propiedad border de tipo "shorthand" se puede establecer de forma directa el

Propiedad border tipo "shorthand”

En los valores de la propiedad escribiremos la medida, el color, y el estilo, aunque se

El margen interno está entre el contenido y el borde, es transparente, y conserva algunas

También podemos establecer el relleno o padding mediante la utilización de una propiedad de

• Si se indica un valor: Se aplica a los cuatro márgenes.

• Si se indican dos valores: El primero se aplica al margen superior e inferior, y el segundo al

• Si se aplican cuatro valores: El orden de aplicación es superior, derecho, inferior, izquierdo.

El margen externo: margin

El margen externo: margin propiedad margin tipo "shorthand”

También podemos establecer el margen mediante la utilización de una propiedad de tipo

FUSIÓN DE MÁRGENES: Cuando se juntan dos o más márgenes verticales, se fusionan de

Tratamiento de los márgenes verticales.

Aunque en principio puede parecer un comportamiento extraño, la razón por la que se

En el caso de un elemento que se

También podría gustarte