Actualizado el 14-01-2007
versión para imprimir
propiedades de caja
Los navegadores visualizan los documentos HTML en su ventana principal, tratando cada elemento que forma el documento como una caja o bloque, que deben posicionar siguiendo el orden y reglas definidas mediante css.
Los distintos elementos que forman el documento HTML pueden estar unos a continuación de otros, en orden sucesivo, o bien puede suceder que un elemento contenga en su interior otro elemento.
El elemento o box principal es el formado por las etiquetas <body>< /body>. Cuando el navegador visualiza un documento HTML, crea una caja para el elemento BODY. El área de contenido de esta caja es a su vez el
contenedor de todas las cajas creadas por las etiquetas 'block-level' HTML (Por ejemplo, p, h1, h2..., pre, ul, div etc), que son visualizadas una a continuación de otra.
Si una de estas cajas tiene otra en su interior, es visualizada dentro
de su caja-contenedor.
Es decir, cada etiqueta HTML que genera un bloque en el documento (block-level) forma una caja. El navegador visualiza estos elementos en bloques rectangulares (box) segun un orden y mostrando unas distancias entre ellos predeterminadas por unas reglas que se pueden manejar mediante hojas de estilo.
Estructura de la caja
- en el centro de la caja, está el contenido (' contenido '), es decir, el texto o elementos que se visualizan.
- Alrededor del contenido hay un área llamada 'padding' , que se extiende hasta el borde.
- El borde (' border' ) es la línea que separa el contenido y el área de padding de los márgenes.
- Los márgenes (' margin' ) son los espacios entre los bordes de la
caja o box, y los bordes de otras cajas que pueda haber alrededor. Los márgenes se situan fuera de los bordes, y son, pues la parte mas exterior de la caja.
Los márgenes son siempre transparentes. Por ejemplo, si diseñamos un párrafo con fondo blanco, y el fondo de la página es azul, dicho párrafo será considerado por el navegador como un 'box' ; la parte interior (incluyendo contenido, padding y bordes) será blanca. Los márgenes, azules (el color del fondo de la página se verá a su través).
margen borde padding contenido
márgenes
margin-top, margin-bottom, margin-left, margin-right, son las cuatro propiedades que controlan los márgenes alrededor de un elemento. Por ejemplo:
.mimargen { margin-top: 10px; margin-bottom: 45px;
margin-left: 100px; margin-right: 155px }
esta etiqueta H4 tiene los margenes indicados y esto es el resto de la linea.
Y de esta otra forma colocariamos un márgen de una pulgada alrededor de toda la página:
<style type="text/css">
body {margin-left:1in; margin-right:1in; margin-top:1in; margin-bottom:1in}
Cada lado del margen puede ajustarse por separado. Y pueden asignarse
usando la propiedad reducida 'margin', seguida de los valores correspondientes, sin que sea necesario especificar al margen a que se refieren, pues el orden es el mismo que el sentido de las agujas del reloj: arriba, derecha, fondo, izquierda. Si no se especifican cuatro valores, sino uno, dos o tres, los que faltan se derivan del lado opuesto:
Si solo se expresa un valor, el navegador lo usará como valor por defecto para los cuatro lados.
Si se expresan dos valores sin especificar (por ejemplo, margin:20px 30px), el navegador considerará que el primero se refiere al margin-top, y el segundo al margin-right. Si el Navegador no encuentra un valor para el margin-bottom (siguiente por orden) usa el mismo valor del margin-top. Y lo mismo ocurre con el margin left. Si se definen tres valores, el primer y el tercero se consideran padding top y bottom, respectivamente, y el segundo es usado para margin right y left.
Los valores pueden expresarse en cualquiera de las unidades
admisibles en CSS1: px, pt, etc...; y tambien en porcentajes.
Cuando los márgenes horizontales de dos bloques se encuentran, el navegador los junta sin superponerlos. Sin embargo, cuando se trata de margenes verticales, se solapan. Por ejemplo, si este párrafo tuviera un margin-bottom de 1cm (que tiene, de hecho) ...
y este otro un margin-top de 1cm (que tambien tiene), ambos párrafos deberían tener una distancia de 2cm, pero no, es de uno solo. En el flujo normal de elementos, margenes inferior y superior de las respectivas cajas no se suman, contando el valor mas alto.
Los márgenes verticales entre una caja flotante y cualquier otra caja no se solapan. Tampoco los márgenes de cajas con posiciones absoluta y relativa.
padding
padding-top, padding-bottom, padding-left, padding-right
Padding es el espacio entre el contenido y el borde del elemento box.
Trabaja de forma similar a los márgenes, y se pueden asignar valores top,
bottom, left, y right.
Veamos una etiqueta H4 con el siguiente estilo:
h4 {padding-top: 10px; padding-bottom: 45px;
padding-left: 100px; padding-right: 155px }
esta etiqueta H4 tiene el padding indicado
Como los márgenes, se pueden asignar valores al padding usando las unidades de longitud o porcentajes admitidos por el CSS
<p style="padding: 30px,10px;background:white"> este es un ejemplo de padding </p>
Veamos como resultaría:
este es el mismo ejemplo de padding
Recuerda la regla del sentido de las agujas del reloj: La declaración 30px 10px; significa top=30px y right=30px. Si el navegador no encuentra un valor para el padding
bottom (siguiente por orden) usa el valor del padding top. Y lo mismo ocurre con el padding left. Si se definen tres valores, el primer y el tercero se
consideran padding top y bottom, respectivamente, y el segundo es usado para
padding right y left.
La misma regla funciona con los márgenes, que se recuerda que son transparentes, no recogen el background de su elemento, sino el
del fondo: simplemente añaden un espacio vacio alrededor del elemento.
pulsa aqui si quieres ver algunos ejemplos de padding y márgenes.
border
Segun el standard CSS1, todo objeto HTML tiene un borde,
que normalmente no se visualiza y tiene un valor fijo que determina el propio navegador. Sabemos que el borde es la línea que separa los margenes del padding.
Hay tres caracteristicas esenciales de los bordes que pueden ser definidas:
color, estilo o anchura (border color, border style y border width), cuyos
valores podrán ser dintintos para cada uno de sus cuatro lados.
los valores border-width (anchura) son 'thin', 'medium' y 'thick'. Se pueden usar porcentajes, o indicar unidades de medida.
veamos ejemplos:
H1 {border-width:5px}
esta es una cabecera H3 con borde de 5px
El ancho del borde se puede asignar con la propiedad reducida border-width, o para cada lado: border-width-top, border-width-right, etc.
Los valores para el border-style son: none, dotted, dashed, solid, double, groove, ridge, inset, outset. El valor inicial es none.
-
none: no se visualiza ningun borde (aunque pueda especificarse su anchura).
-
dotted: el borde será una linea de puntos sobre el background del elemento.
-
dashed: el borde será una línea de guiones
-
solid: una línea normal.
-
double: el borde será una línea doble. La suma de las dos lineas mas el espacio entre ellas será igual a la anchura del borde (border-width).
-
groove: una huella de línea, linea hundida
-
ridge: linea resaltada (relieve)
-
inset: toda la caja hundida
-
outset: toda la caja resaltada
Esta característica puede no ser soportada por los distintos navegadores.
Todas las propiedades y valores del
borde se pueden agrupar en la propiedad 'border'.