Acerca del Web Design Group

Propiedades de cuadros



Top Margin (Margen superior)

Sintaxis: margin-top: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: margin-right: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: margin-bottom: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: margin-left: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: margin: <valor>
Valores posibles: [ <longitud> | <porcentaje> | auto]{1,4}
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: padding-top: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: padding-right: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: padding-bottom: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: padding-left: <valor>
Valores posibles: <longitud> | <porcentaje>
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: padding: <valor>
Valores posibles: [ <longitud> | <porcentaje>]{1,4}
Valor inicial: 0
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-top-width: <valor>
Valores posibles: thin | medium | thick | <longitud>
Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-right-width: <valor>
Valores posibles: thin | medium | thick | <longitud>
Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-bottom-width: <valor>
Valores posibles: thin | medium | thick | <longitud>
Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-left-width: <valor>
Valores posibles: thin | medium | thick | <longitud>
Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-width: <valor>
Valores posibles: [ thin | medium | thick | <longitud> ]{1,4}
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-color: <valor>
Valores posibles: <color>{1,4}
Valor inicial: El valor de la propiedad color
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-style: <valor>
Valores posibles: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-top: <valor>
Valores posibles: <border-top-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-right: <valor>
Valores posibles: <border-top-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-bottom: <valor>
Valores posibles: <border-bottom-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border-left: <valor>
Valores posibles: <border-left-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: border: <valor>
Valores posibles: <border-width> || <border-style> || <color>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: width: <valor>
Valores posibles: <longitud> | <porcentaje> | auto
Valor inicial: auto
Se aplica a: Elementos de nivel bloque y elementos reemplazados
Heredado: No

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)

Sintaxis: height: <valor>
Valores posibles: <longitud> | auto
Valor inicial: auto
Se aplica a: Elementos de nivel bloque y elementos reemplazados
Heredado: No

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)

Sintaxis: float: <valor>
Valores posibles: left | right | none
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: clear: <valor>
Valores posibles: none | left | right | both
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

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


Web Design Group ~ ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

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