Propiedades de cuadros

• Top Margin (Margen superior)
• Right Margin (Margen derecho)
• Bottom Margin (Margen inferior)
• Left Margin (Margen izquierdo)
• Margin (Margen)
• Top Padding (Relleno superior)
• Right Padding (Relleno derecho)
• Bottom Padding (Relleno inferior)
• Left Padding (Relleno izquierdo)
• Padding (Relleno)
• Top Border Width (Ancho de borde superior)
• Right Border Width (Ancho de borde derecho)
• Bottom Border Width (Ancho de borde inferior)
• Left Border Width (Ancho de borde izquierdo)
• Border Width (Ancho de borde)
• Border Color (Color de borde)
• Border Style (Estilo de borde)
• Top Border (Borde superior)
• Right Border (Borde derecho)
• Bottom Border (Borde de fondo)
• Left Border (Borde izquierdo)
• Border (Borde)
• Width (Ancho)
• Height (Altura)
• Float (Flotar)
• Clear (Despejar)

Top Margin (Margen superior)

La propiedad margin-top establece el margen superior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Por ejemplo, la siguiente regla eliminaría el margen superior de un documento:

BODY { margin-top: 0 }

Note que los márgenes verticales contiguos son contraídos para usar el mayor de los valores de margen.

Right Margin (Margen derecho)

La propiedad margin-right establece el margen derecho de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Ejemplo:

P.estrecho { margin-right: 50% }

Note que los márgenes horizontales contiguos no son contraídos.

Bottom Margin (Margen inferior)

La propiedad margin-bottom establece el margen inferior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Ejemplo:

DT { margin-bottom: 3em }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Left Margin (Margen izquierdo)

La propiedad margin-left establece el margen izquierdo de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Ejemplo:

ADDRESS { margin-left: 50% }

Note que los márgenes horizontales contiguos no son contraídos.

Margin (Margen)

La propiedad margin establece los márgenes de un elemento especificando entre uno y cuatro valores, donde cada valor es una longitud, un porcentaje o auto. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten márgenes negativos.

Si se dan cuatro valores, se aplican a los márgenes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Ejemplos de declaraciones margin incluyen:

BODY { margin: 5em }             /* todos los márgenes 5em */
P    { margin: 2em 4em }         /* márgenes superior e inferior 2em,
                                    márgenes izquierdo y derecho 4em */
DIV { margin: 1em 2em 3em 4em } /* margen superior 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

Note that adjoining vertical margins are collapsed to use the maximum of the margin values. Los márgenes horizontales no son contraídos.

Usando la propiedad margin se pueden establecer todos los márgenes; alternativamente, pueden usarse las propiedades margin-top, margin-bottom, margin-left y margin-right.

Top Padding (Relleno superior)

La propiedad padding-top describe cuanto espacio colocar entre el borde superior y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Right Padding (Relleno derecho)

La propiedad padding-right describe cuanto espacio colocar entre el borde derecho y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Bottom Padding (Relleno inferior)

La propiedad padding-bottom describe cuanto espacio colocar entre el borde inferior y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Left Padding (Relleno izquierdo)

La propiedad padding-left describe cuanto espacio colocar entre el borde izquierdo y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Padding (Relleno)

La propiedad padding es una manera rápida de aplicar las propiedades padding-top, padding-right, padding-bottom y padding-left.

El padding de un elemento es la cantidad de espacio entre el borde y el contenido del elemento. Se dan entre uno y cuatro valores, donde cada valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Si se dan cuatro valores, se aplican a los paddings superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Por ejemplo, la siguiente regla establece el padding superior a 2em, el derecho a 4em, el inferior a 5em y el izquierdo a 4em:

BLOCKQUOTE { padding: 2em 4em 5em }

Top Border Width (Ancho de borde superior)

La propiedad border-top-width se usa para especificar el ancho del borde superior de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamaño de fuente o longitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos.

También se pueden usar las propiedades border-top, border-width, o la forma rápida border.

Right Border Width (Ancho de borde derecho)

La propiedad border-right-width se usa para especificar el ancho del borde derecho de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamaño de fuente o longitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos.

También se pueden usar las propiedades border-right, border-width, o la forma rápida border.

Bottom Border Width (Ancho de borde inferior)

La propiedad border-bottom-width se usa para especificar el ancho del borde inferior de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamaño de fuente o longitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos.

También se pueden usar las propiedades border-bottom, border-width, o la forma rápida border.

Left Border Width (Ancho de borde izquierdo)

La propiedad border-left-width se usa para especificar el ancho del borde izquierdo de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamaño de fuente o longitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos.

También se pueden usar las propiedades border-left, border-width, o la forma rápida border.

Border Width (Ancho de borde)

La propiedad border-width se usa para establecer el ancho de borde de un elemento especificando entre uno y cuatro valores, donde cada valor es una palabra clave o una longitud. No se permiten los valores negativos.

Si se dan cuatro valores, se aplican a los bordes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Esta propiedad es una forma rápida de las propiedades border-top-width, border-right-width, border-bottom-width y border-left-width.

One may also use the border shorthand property.

Border Color (Color de borde)

La propiedad border-color establece el color del borde de un elemento. Se especifican entre uno y cuatro valores de color. Si se dan cuatro valores, se aplican a los colores de borde superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

También puede usarse la propiedad rápida border.

Border Style (Estilo de borde)

La propiedad border-style establece el estilo del borde de un elemento. Esta propiedad debe ser especificada para que el borde sea visible.

Se especifican entre una y cuatro palabras clave. Si se dan cuatro valores, se aplican a los estilos de borde superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

One may also use the border shorthand property.

Top Border (Borde superior)

La propiedad border-top es una forma rápida para establecer el ancho, estilo y el color del borde superior de un elemento.

Note que solo puede darse un valor de border-style.

One may also use the border shorthand property.

Right Border (Borde derecho)

La propiedad border-right es una forma rápida para establecer el ancho, estilo y el color del borde derecho de un elemento.

Note que solo puede darse un valor de border-style.

One may also use the border shorthand property.

Bottom Border (Borde de fondo)

La propiedad border-bottom es una forma rápida para establecer el ancho, estilo y el color del borde inferior de un elemento.

Note que solo puede darse un valor de border-style.

One may also use the border shorthand property.

Left Border (Borde izquierdo)

La propiedad border-left es una forma rápida para establecer el ancho, estilo y el color del borde izquierdo de un elemento.

Note que solo puede darse un valor de border-style.

One may also use the border shorthand property.

Border (Borde)

La propiedad border es una forma rápida para establecer el ancho, estilo y el color del borde izquierdo de un elemento.

Ejemplos de declaraciones border incluyen:

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

La propiedad border solo puede establecer todos los cuatro bordes; puede aplicar solo un ancho y estilo de borde. Para dar diferentes valores a los cuatro bordes de un elemento, se deben usar una o más de las propiedades border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, o border-left-width.

Width (Ancho)

A cada elemento de nivel bloque o elemento reemplazado se le puede dar un ancho width, especificado como una longitud, un porcentaje o como auto. (Un elemento reemplazado es uno del que solo se conocen las dimensiones intrínsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT y OBJECT.) El valor inicial para la propiedad width es auto, lo que resulta en el ancho intrínseco del elemento (es decir, el ancho del elemento mismo, como por ejemplo el ancho de una imagen). Los porcentajes se refieren al ancho del elemento padre. No se permiten los valores negativos.

Esta propiedad podría usarse para dar un ancho común a algunos elementos INPUT, como los botones SUBMIT y RESET:

INPUT.boton { width: 10em }

Height (Altura)

A cada elemento de nivel bloque o elemento reemplazado se le puede dar una altura height, especificada como una longitud o como auto. (Un elemento reemplazado es uno del que solo se conocen las dimensiones intrínsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT y OBJECT.) El valor inicial para la propiedad width es auto, lo que resulta en el ancho intrínseco del elemento (es decir, el ancho del elemento mismo, como por ejemplo el ancho de una imagen). No se permiten longitudes negativos.

Como con la propiedad width, height puede usarse para escalar una imagen:

IMG.foo { width: 40px; height: 40px }

En la mayoría de los casos, se recomienda a los autores escalar la imagen en un programa de edición de imágenes, ya que los navegadores probablemente no escalarán las imágenes con alta calidad, y ya que la escala reducida origina que el usuario descargue un archivo innecesariamente grande. Sin embargo, escalar mediante las propiedades width y height es un opción útil para hojas de estilo definidas por el usuario a fin de superar problemas de visión.

Float (Flotar)

La propiedad float permite ajustar texto alrededor de un elemento. Esto es idéntico en propósito a ALIGN=left y ALIGN=right para el elemento IMG de HTML 3.2, pero CSS1 permite que todos los elementos "floten," no solo las imágenes y tablas que permite HTML 3.2.

Clear (Despejar)

La propiedad clear especifica si un elemento permite elementos flotantes a sus lados. Un valor left mueve el elemento debajo de cualquier elemento flotante a su izquierda; right actúa en forma similar para elementos flotantes a la derecha. Otros valores son none, que es el valor inicial, y both, que mueve el elemento debajo de los elementos flotantes a ambos lados. Esta propiedad es similar en función a <BR CLEAR=left|right|all|none> de HTML 3.2, pero puede aplicarse a todos los elementos.

Mantenido por John Pozadzides y Liam Quinn

ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.