- El siguiente grupo son las propiedades de cuadro y son bastantes:
margin-top
, margin-right
, margin-bottom
, margin-left
, margin
padding-top
, padding-right
, padding-bottom
, padding-left
, padding
border-top-width
, border-right-width
, border-bottom-width
, border-left-width
, border-width
; border-color
; border-style
; border-top
, border-right
, border-bottom
, border-left
; border
width
, height
, float
, clear
- ¡Uf, creo que aquí nos van a dar las uvas!
- Tranqui, a ver si lo resumimos bien. Las propiedades de margen (margin-top
, margin-right
, margin-bottom
, margin-left
) pueden tomar como valor una longitud, un porcentaje o el valor auto
(automático). El porcentaje se refiere al margen del ascendiente en bloque más cercano. Se permiten valores negativos. Por ejemplo: margin-left : 2em
- Pues vale...
- En margin
englobas las cuatro propiedades de margen, dando cuatro valores consecutivos, para el margen superior (top), derecho (right), inferior (bottom) e izquierdo (left) respectivamente. Por ejemplo, margin : 1em 2em 1em 3em
. Más información en la especificación.
- Ok, ok.
- Las propiedades de relleno (padding-top
, padding-right
, padding-bottom
, padding-left
) puede tomar como valor una longitud, o un porcentaje, que también se refiere al relleno del ascendiente en bloque más cercano. Aquí no se permiten valores negativos. En padding
englobas los valores para los cuatro rellenos en el mismo orden que antes. ¿Ok?
- Ok.
- Por ejemplo:
p {
background-color : yellow;
padding : 1em;
margin : 1em;
}
Aquí el párrafo y un área de 1em
a cada lado (el área de relleno) tienen fondo amarillo. El margen es de fondo transparente:
- Ajá, ya veo, o sea que el margen es siempre transparente, ¿no?
- Sí. Las propiedades de anchura de borde (border-top-width
, border-right-width
, border-bottom-width
, border-left-width
) pueden tomar uno de los siguientes valores: thin
(delgado), medium
(mediano), thick
(grueso) o una longitud. Con border-width
especificas los cuatro a la vez, en el mismo orden que antes. Por ejemplo:
p {
background-color : yellow;
padding : 1em;
margin : 1em;
border-style : solid;
border-width : thin thick thick thin
}
No te preocupes por lo de border-style
, en seguida lo vemos.
- Muy bien, sigue.
- border-color
es como border-width
, pero en vez de anchuras, ponemos colores. El valor por defecto para el color de los bordes es el mismo que el de la propiedad color
del elemento:
p {
background-color : silver;
padding : 1em;
margin : 1em;
border-width : medium thick thick medium;
border-color : white gray gray white;
border-style : solid;
}
- Qué bonito.
- border-style
dice el estilo de los cuatro bordes, y puede tomar uno de estos valores: none
(ninguno), dotted
(punteado), dashed
(a trazos), solid
(continuo), double
(doble), groove
(canal), ridge
(cresta), inset
(bajorrelieve), o outset
(altorrelieve).
Para los cuatro últimos tienes que dar un valor a la propiedad color
si quieres ver el efecto. Por ejemplo:
p {
background-color : silver;
color : maroon;
padding : 1em;
margin : 1em;
border-style : inset
}
Las propiedades border-top
, border-right
, border-bottom
y border-left
permiten especificar, para cada borde, su anchura, su color y su estilo:
p {
border-top : 3px #000 dashed;
border-bottom : 3px #000 dashed;
border-right : 3px #000 double;
border-left : 3px #000 double;
}
- Muy bien.
- Y la propiedad border
es un resumen de las cuatro anteriores, que permite especificar, para los cuatro bordes, la anchura, el color y el estilo:
p { border : 3px black double }
- Je je, mucho más sencillo.
- Finalmente, width
y height
especifican la altura de un elemento en bloque o un elemento reemplazado, como una imagen. Pueden tomar el valor auto
, una longitud, y width
también puede ser un porcentaje de la anchura del elemento padre. Por ejemplo:
IMG.icono {
width : 100px;
height : 100px;
}
div.nota { width : 50% }
Un par de comentarios respecto a estas propiedades.
- A ver...
- Si recuerdas, te dije que la anchura del cuadro de un elemento en bloque es: la anchura del contenido, más la anchura de relleno, borde y márgenes.
- Sí.
- Por otra parte, la anchura del cuadro de un elemento es igual a la anchura del contenido de su elemento padre, por ejemplo:
- Mmmm, sí.
- Esto quiere decir que los valores que demos a los márgenes, bordes y rellenos derecho e izquierdo, más la anchura del elemento, deben ser igual a la anchura del cuadro del elemento, no pueden ser cualesquiera.
- Claro...
- Por eso CSS1 define unas reglas para que esto siempre se cumpla. Las puedes encontrar en la especificación. Al principio parecen un lío pero en realidad son bastante lógicas.
- Bueno, vale.
- Y con respecto a la altura, en CSS1 es más útil para elementos reemplazados que para elementos en bloque, porque no es necesario que el navegador tenga en cuenta la altura para elementos en bloque.
- Aaaah...
- Lo propiedad float
indica que un elemento flota a la izquierda (float:left
), a la derecha (float:right
) o que no es un objeto flotante (float:none
), por ejemplo:
img.figura {
float : right;
margin-left : 1em;
margin-right : 0;
}
- Entiendo.
- Y por último la propiedad clear
indica si un elemento puede tener objetos flotantes a sus lados. Con clear:left
, el elemento se mueve hacia abajo hasta que quede por debajo de un hipotético objeto que flote a la izquierda. Con clear:right
lo mismo pero a la derecha. Con clear:both
no se permite que haya un objeto flotante a ningún lado, y con clear:none
se permiten objetos flotantes a ambos lados:
h1 { clear : both }
- Ya entiendo.
- Estupendo, pues pasamos al último grupo.
- Genial.
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 14/10/2001 - © 2001 Juan R. Pozo y conclase.net