Ir directamente al contenido de esta página

codexexempla.org

Cajas

Tabla de contenidos

  1. border
  2. border-color
  3. border-style
  4. border-width
  5. border-bottom
  6. border-bottom-color
  7. border-bottom-style
  8. border-bottom-width
  9. border-left
  10. border-left-color
  11. border-left-style
  12. border-left-width
  13. border-right
  14. border-right-color
  15. border-right-style
  16. border-right-width
  17. border-top
  18. border-top-color
  19. border-top-style
  20. border-top-width
  21. clip
  22. display
  23. height
  24. margin
  25. margin-bottom
  26. margin-left
  27. margin-right
  28. margin-top
  29. max-height
  30. max-width
  31. min-height
  32. min-width
  33. overflow
  34. padding
  35. padding-bottom
  36. padding-left
  37. padding-right
  38. padding-top
  39. visibility
  40. width

border [propiedad de conjunto]

Descripción
Propiedad de conjunto para definir el aspecto del borde de un elemento. Engloba las propiedades border-color, border-style y border-width.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-color

Descripción
Especifica el color del borde de un elemento.
Valores posibles
  • Un color.
  • transparent: El borde se hace transparente, aunque su grosor sigue afectando a la posición de los elementos adyacentes.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
El valor de la propiedad color del elemento al que se ha aplicado.
Aplicable a
Todos los elementos.
¿Heredada?
No.
Notas
Se puede definir por separado el color de cada uno de los cuatro bordes de la caja de un elemento. Según los bordes que se quieran iguales, hay diversas sintaxis:

    div{
        border-color:black; 
        /* Los cuatro serán negros */
    }
    
    div{
        border-color:black yellow; 
        /* El primer valor se aplica a los 
        bordes superior e inferior, el 
        segundo al derecho y al izquierdo */
    }
    
    div{
        border-color:black yellow lime;
        /* El primer valor se aplica al borde 
        superior, el segundo al derecho y al 
        izquierdo, el tercero al inferior */
    }
    
    div{
        border-color:black yellow lime purple;
        /* Los valores se aplican a los bordes
        en sentido horario: superior, derecho, 
        inferior e izquierdo */
    }
                    

Ver ejemplos de los valores de border-color.

border-style

Descripción
Define el estilo del borde de un elemento.
Valores posibles
  • none: Especifica que no debe existir borde. Si se especifica, anula cualquier definición de ancho o color del borde.
  • hidden: Igual que none.
  • dotted: El borde aparece punteado.
  • dashed: El borde se muestra como una línea discontinua.
  • solid: El borde se muestra como una línea continua.
  • double: El borde aparece como dos líneas sólidas separadas por un espacio en blanco. No se aprecia a menos que el grosor del mismo sea como mínimo de 3 píxeles. Para valores superiores a éste, el ancho se reparte automáticamente entre las dos líneas y la separación, pero ninguno de estos tres puede definirse por separado.
  • groove: El borde presenta el aspecto de un surco o una arista.
  • ridge: Como groove, pero invirtiendo los colores.
  • inset: El borde parece hundirse con respecto al plano.
  • outset: El borde parece sobresalir con respecto al plano.
Valor por defecto
none.
Aplicable a
Todos los elementos.
¿Heredada?
No.
Notas
El color de fondo del elemento se extiende hasta la arista exterior del borde del elemento, por lo que aparece cuando el color de borde se establece a transparent, o cuando el estilo muestra huecos, como en dotted.
Hay un bug reconocido en Internet Explorer 6, y es que si se establece el estilo a dotted y el ancho a 1 píxel, el borde se representa como dashed.
Se puede definir estilos para diversos bordes, con la misma sintaxis abreviada que para border-color.

Ver ejemplos de los valores de border-style.

border-width

Descripción
Especifica el grosor del borde de un elemento.
Valores posibles
  • Una medida absoluta o relativa. No puede ser un valor negativo.
  • thin: Establece un borde fino.
  • medium: Establece un borde medio.
  • thick: Establece un borde grueso.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
medium.
Aplicable a
Todos los elementos.
¿Heredada?
No.
Notas
Se puede definir anchos para diversos bordes, con la misma sintaxis abreviada que para border-color.

Ver ejemplos de los valores de border-width.

border-bottom [propiedad de conjunto]

Descripción
Propiedad de conjunto para definir el aspecto del borde inferior de un elemento. Engloba las propiedades border-bottom-color, border-bottom-style y border-bottom-width.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-bottom-color

Descripción
Especifica el color del borde inferior de un elemento.
Valores posibles
  • Un color.
  • transparent: El borde se hace transparente, aunque su grosor sigue afectando a la posición de los elementos adyacentes.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
El valor de la propiedad color del elemento al que se ha aplicado.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-bottom-style

Descripción
Especifica el estilo del borde inferior de un elemento.
Valores posibles
  • none: Especifica que no debe existir borde. Si se especifica, anula cualquier definición de ancho o color del borde.
  • hidden: Igual que none.
  • dotted: El borde aparece punteado.
  • dashed: El borde se muestra como una línea discontinua.
  • solid: El borde se muestra como una línea continua.
  • double: El borde aparece como dos líneas sólidas. No se aprecia a menos que el grosor del mismo sea como mínimo de 3 píxeles.
  • groove: El borde presenta el aspecto de un surco o una arista.
  • ridge: Como groove, pero invirtiendo los colores.
  • inset: El borde parece hundirse con respecto al plano.
  • outset: El borde parece sobresalir con respecto al plano.
Valor por defecto
none.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-bottom-width

Descripción
Especifica el grosor del borde inferior de un elemento.
Valores posibles
  • Una medida absoluta o relativa. No puede ser un valor negativo.
  • thin: Establece un borde fino.
  • medium: Establece un borde medio.
  • thick: Establece un borde grueso.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
medium.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-left [propiedad de conjunto]

Descripción
Propiedad de conjunto para definir el aspecto del borde izquierdo de un elemento. Engloba las propiedades border-left-color, border-left-style y border-left-width.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-left-color

Descripción
Especifica el color del borde izquierdo de un elemento.
Valores posibles
  • Un color.
  • transparent: El borde se hace transparente, aunque su grosor sigue afectando a la posición de los elementos adyacentes.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
El valor de la propiedad color del elemento al que se ha aplicado.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-left-style

Descripción
Especifica el estilo del borde izquierdo de un elemento.
Valores posibles
  • none: Especifica que no debe existir borde. Si se especifica, anula cualquier definición de ancho o color del borde.
  • hidden: Igual que none.
  • dotted: El borde aparece punteado.
  • dashed: El borde se muestra como una línea discontinua.
  • solid: El borde se muestra como una línea continua.
  • double: El borde aparece como dos líneas sólidas. No se aprecia a menos que el grosor del mismo sea como mínimo de 3 píxeles.
  • groove: El borde presenta el aspecto de un surco o una arista.
  • ridge: Como groove, pero invirtiendo los colores.
  • inset: El borde parece hundirse con respecto al plano.
  • outset: El borde parece sobresalir con respecto al plano.
Valor por defecto
none.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-left-width

Descripción
Especifica el grosor del borde izquierdo de un elemento.
Valores posibles
  • Una medida absoluta o relativa. No puede ser un valor negativo.
  • thin: Establece un borde fino.
  • medium: Establece un borde medio.
  • thick: Establece un borde grueso.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
medium.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-right [propiedad de conjunto]

Descripción
Propiedad de conjunto para definir el aspecto del borde derecho de un elemento. Engloba las propiedades border-right-color, border-right-style y border-right-width.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-right-color

Descripción
Especifica el color del borde derecho de un elemento.
Valores posibles
  • Un color.
  • transparent: El borde se hace transparente, aunque su grosor sigue afectando a la posición de los elementos adyacentes.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
El valor de la propiedad color del elemento al que se ha aplicado.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-right-style

Descripción
Especifica el estilo del borde derecho de un elemento.
Valores posibles
  • none: Especifica que no debe existir borde. Si se especifica, anula cualquier definición de ancho o color del borde.
  • hidden: Igual que none.
  • dotted: El borde aparece punteado.
  • dashed: El borde se muestra como una línea discontinua.
  • solid: El borde se muestra como una línea continua.
  • double: El borde aparece como dos líneas sólidas. No se aprecia a menos que el grosor del mismo sea como mínimo de 3 píxeles.
  • groove: El borde presenta el aspecto de un surco o una arista.
  • ridge: Como groove, pero invirtiendo los colores.
  • inset: El borde parece hundirse con respecto al plano.
  • outset: El borde parece sobresalir con respecto al plano.
Valor por defecto
none.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-right-width

Descripción
Especifica el grosor del borde derecho de un elemento.
Valores posibles
  • Una medida absoluta o relativa. No puede ser un valor negativo.
  • thin: Establece un borde fino.
  • medium: Establece un borde medio.
  • thick: Establece un borde grueso.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
medium.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-top [propiedad de conjunto]

Descripción
Propiedad de conjunto para definir el aspecto del borde superior de un elemento. Engloba las propiedades border-top-color, border-top-style y border-top-width.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-top-color

Descripción
Especifica el color del borde superior de un elemento.
Valores posibles
  • Un color.
  • transparent: El borde se hace transparente, aunque su grosor sigue afectando a la posición de los elementos adyacentes.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
El valor de la propiedad color del elemento al que se ha aplicado.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-top-style

Descripción
Especifica el estilo del borde superior de un elemento.
Valores posibles
  • none: Especifica que no debe existir borde. Si se especifica, anula cualquier definición de ancho o color del borde.
  • hidden: Igual que none.
  • dotted: El borde aparece punteado.
  • dashed: El borde se muestra como una línea discontinua.
  • solid: El borde se muestra como una línea continua.
  • double: El borde aparece como dos líneas sólidas. No se aprecia a menos que el grosor del mismo sea como mínimo de 3 píxeles.
  • groove: El borde presenta el aspecto de un surco o una arista.
  • ridge: Como groove, pero invirtiendo los colores.
  • inset: El borde parece hundirse con respecto al plano.
  • outset: El borde parece sobresalir con respecto al plano.
Valor por defecto
none.
Aplicable a
Todos los elementos.
¿Heredada?
No.

border-top-width

Descripción
Especifica el grosor del borde superior de un elemento.
Valores posibles
  • Una medida absoluta o relativa. No puede ser un valor negativo.
  • thin: Establece un borde fino.
  • medium: Establece un borde medio.
  • thick: Establece un borde grueso.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
medium.
Aplicable a
Todos los elementos.
¿Heredada?
No.

clip

Descripción
Indica las dimensiones de un rectángulo de recorte —como si se tratara de una máscara— que se aplica sobre un elemento.
Valores posibles
  • rect(): Se especifican cuatro longitudes que definen las aristas del área de recorte. Las longitudes pueden ser absolutas o relativas, o bien tener un valor de auto.
  • auto: El elemento no muestra rectángulo de recorte.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
auto.
Aplicable a
Elementos a los que se ha aplicado position:absolute.
¿Heredada?
No.
Notas
Los cuatro valores que se deben especificar en rect() —separados por comas— son las distancias de las aristas del rectángulo de recorte y las aristas de la caja del elemento, en sentido horario, comenzando por el superior, es decir, arriba, derecha, abajo e izquierda. Sin embargo, no es tan intutivo como debería ser si tomamos el ejemplo de padding, porque cada distancia no se mide la arista correspondiente a su lateral, sino que las verticales se sitúan siempre con respecto a la arista superior del elemento, y las laterales, desde la izquierda o la derecha, dependiendo de la dirección de lectura natural del documento.
Así, el siguiente código

    #banner{
        clip:rect(10px,140px,110px,40px);
    }
                    
no recortaría 10 píxeles del lado superior e inferior de banner, 140 de la derecha, 110 desde abajo y 40 de la izquierda. Lo que haría sería mostrar el contenido del elemento comprendido entre los píxeles 10 y 110 del eje vertical, y los 40 y 140 del eje horizontal.
Espero que con un gráfico se entienda mejor:
Ilustración del párrafo anterior
A diferencia de las propiedades de márgenes y rellenos, no hay sintaxis abreviada que permita agrupar lados, por lo que siempre hay que especificar cuatro valores, aunque estos se repitan. auto equivale a 0.
En la especificación 2.1 de CSS sólo se contempla la forma rectangular de la máscara de recorte, pero se supone que en las siguientes especificaciones habrá más. Personalmente, presupongo que serán las mismas que para el elemento area.

Ver ejemplos de los valores de clip.

display (propiedades generales)

En esta sección recojo los valores de display que se aplican a cajas genéricas. Faltan los valores relacionados con listas y con tablas.

Descripción
Indica el tipo de caja que se debe aplicar al elemento.
Valores posibles
  • inline: El elemento genera una caja como la de un elemento en línea.
  • block: El elemento genera una caja como la de un elemento de bloque.
  • run-in: Con este valor, el comportamiento de la caja del elemento se vuelve un tanto peculiar:
    • Si contiene otra caja de bloque, entonces el elemento se comporta como un elemento de bloque.
    • Si el elemento adyacente —que no haya sido flotado o posicionado de manera absoluta— es un elemento de bloque, el elemento con display:run-in se convierte en el primer elemento en línea del elemento adyacente.
    • Para los demás casos, se comporta como una caja de bloque.
  • inline-block: El elemento genera la caja de un elemento de bloque a la que se pueden aplicar propiedades de este tipo de elementos —como height y width—, pero se comporta como un elemento en línea.
  • none: El elemento no genera caja alguna, por lo que desaparece del flujo del documento.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
inline.
Aplicable a
Todos los elementos.
¿Heredada?
No.
Notas
Por supuesto, esta propiedad sólo afecta a la manera en que se interpreta su posición, no afecta a la naturaleza del elemento, lo que significa que un elemento en línea sigue siendo un elemento en línea y por tanto no puede contener un elemento de bloque, por mucho que se le aplique display:block.
Como ésta es una propiedad muy importante para establecer la maquetación de una página, recomiendo encarecidamente que se revise la tabla de soporte de esta propiedad en los navegadores de quirksmode.org (inglés).

Ver ejemplos de los valores generales de display.

height

Descripción
Especifica la altura del área de contenido de un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere a la altura del elemento padre. Los valores no pueden ser negativos.
  • auto: El agente de usuario calcula la altura en relación con los demás elementos de manera automática.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
auto.
Aplicable a
Todos los elementos salvo elementos en línea no reemplazados1, columnas de tabla y grupos de columnas.
¿Heredada?
No.

Ver ejemplos de los valores generales de height.

margin [propiedad de conjunto]

Descripción
Propiedad de conjunto para definir el tamaño del margen que debe rodear a un elemento. Agrupa las propiedades margin-bottom, margin-left, margin-right y margin-top.
Aplicable a
Todos los elementos salvo aquellos con display tabular distinto de table, table-caption o inline-table.
¿Heredada?
No.
Notas
Se puede definir valores para diversos márgenes, con la misma sintaxis abreviada que para border-color.

Ver ejemplos de los valores de margin.

Tanto al aplicar margin como al aplicar margin-top y margin-bottom hay que tener en cuenta un comportamiento conocido como colapsado de márgenes. Cuando dos elementos de bloque adyacentes cuentan con un margen superior e inferior en contacto, éstos se superponen y el resultado lo comparten según las reglas siguientes:

  • Si ambos márgenes son positivos, comparten el margen mayor.
  • Si uno de los márgenes es negativo, se resta su valor al margen positivo.
  • Si ambos márgenes son negativos, se aplica el que tenga un mayor valor absoluto.

Ver un ejemplo de colapsado de márgenes.

Por último, los márgenes de un elemento y los de su contenedor también colapsan, siguiendo las mismas reglas.

margin-bottom

Descripción
Indica el tamaño del margen inferior del elemento.
Valores posibles
Valor por defecto
0.
Aplicable a
Todos los elementos salvo aquellos con display tabular distinto de table, table-caption o inline-table.
¿Heredada?
No.

margin-left

Descripción
Indica el tamaño del margen izquierdo del elemento.
Valores posibles
Valor por defecto
0.
Aplicable a
Todos los elementos salvo aquellos con display tabular distinto de table, table-caption o inline-table.
¿Heredada?
No.
Notas
Si tanto su valor como el del margen derecho se establecen en auto, el elemento se centra con respecto a los dordes del elemento padre.

margin-right

Descripción
Indica el tamaño del margen derecho del elemento.
Valores posibles
Valor por defecto
0.
Aplicable a
Todos los elementos salvo aquellos con display tabular distinto de table, table-caption o inline-table.
¿Heredada?
No.
Notas
Si tanto su valor como el del margen izquierdo se establecen en auto, el elemento se centra con respecto a los dordes del elemento padre.

margin-top

Descripción
Indica el tamaño del margen superior del elemento.
Valores posibles
Valor por defecto
0.
Aplicable a
Todos los elementos salvo aquellos con display tabular distinto de table, table-caption o inline-table.
¿Heredada?
No.

max-height

Descripción
Especifica la altura máxima que puede llegar a tener un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere a la altura del elemento padre. Los valores no pueden ser negativos.
  • none: Indica que el elemento no tiene límite de altura.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
none.
Aplicable a
Todos los elementos salvo elementos en línea no reemplazados, columnas de tabla y grupos de columnas.
¿Heredada?
No.
Notas
Cuando el alto del contenido del elemento supera la altura máxima, se comporta de la misma manera que para cuando se ha especificado un height fijo, es decir, que si el texto desborda o no el elemento depende del valor de la propiedad overflow.

Ver ejemplos de los valores de max-height.

max-width

Descripción
Especifica la anchura máxima que puede llegar a tener un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere a la anchura del elemento padre. Los valores no pueden ser negativos.
  • none: Indica que el elemento no tiene límite de anchura.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
none.
Aplicable a
Todos los elementos salvo elementos en línea no reemplazados, filas de tabla y grupos de filas.
¿Heredada?
No.
Notas
Cuando el ancho del contenido del elemento supera la anchura máxima, se comporta de la misma manera que para cuando se ha especificado un width fijo, es decir, que si el texto desborda o no el elemento depende del valor de la propiedad overflow.

Ver ejemplos de los valores de max-width.

min-height

Descripción
Especifica la altura mínima que debe tener un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere a la altura del elemento padre. Los valores no pueden ser negativos.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
0.
Aplicable a
Todos los elementos salvo elementos en línea no reemplazados, columnas de tabla y grupos de columnas.
¿Heredada?
No.
Notas
Cuando el alto del contenido del elemento supera la altura mínima, el elemento se comporta de la misma manera que para cuando se ha especificado height:auto.

Ver ejemplos de los valores de min-height.

min-width

Descripción
Especifica la anchura mínima que dede tener un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere a la anchura del elemento padre. Los valores no pueden ser negativos.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
0.
Aplicable a
Todos los elementos salvo elementos en línea no reemplazados, filas de tabla y grupos de filas.
¿Heredada?
No.
Notas
Cuando el ancho del contenido del elemento supera la anchura mínima, el elemento se comporta de la misma manera que para cuando se ha especificado width:auto.

Ver ejemplos de los valores de min-width.

overflow

Descripción
Define como se representa el contenido de un elemento que exceda las dimensiones de éste.
Valores posibles
  • visible: El contenido del elemento se desborda de sus límites, aunque como tal no afecta a la posición de los elementos consecutivos, sino que se superpone.
  • hidden: La parte de contenido que excede las dimensiones del elemento no se muestra.
  • scroll: Aparecen unas barras de desplazamiento en los lados del elemento, para permitir que se recorra el contenido, independientemente de que éste exceda o no el tamaño del elemento en cuestión.
  • auto: La barras aparecen sólo cuando el contenido desborda el tamaño del elemento, pero se ocultan si no son necesarias.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
visible.
Aplicable a
Elementos de bloque no reemplazados, celdas de tabla y elementos a los que se ha aplicado display:inline-block.
¿Heredada?
No.

Ver ejemplos de los valores de overflow.

padding [propiedad de conjunto]

Descripción
Propiedad de conjunto que especifica la cantidad de relleno entre el área de contenido y el borde de un elemento. Agrupa las propiedades padding-bottom, padding-left, padding-right y padding-top.
Aplicable a
Todos los elementos.
¿Heredada?
No.
Notas
Se puede definir valores para diferentes rellenos, con la misma sintaxis abreviada que para border-color.

Ver ejemplos de los valores de padding.

padding-bottom

Descripción
Especifica la cantidad de relleno inferior entre el área de contenido y el borde de un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere al bloque contenedor. Los valores no pueden ser negativos.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
0.
Aplicable a
Todos los elementos salvo aquellos con un display de table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column.
¿Heredada?
No.

padding-left

Descripción
Especifica la cantidad de relleno izquierdo entre el área de contenido y el borde de un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere al bloque contenedor. Los valores no pueden ser negativos.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
0.
Aplicable a
Todos los elementos salvo aquellos con un display de table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column.
¿Heredada?
No.

padding-right

Descripción
Especifica la cantidad de relleno derecho entre el área de contenido y el borde de un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere al bloque contenedor. Los valores no pueden ser negativos.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
0.
Aplicable a
Todos los elementos salvo aquellos con un display de table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column.
¿Heredada?
No.

padding-top

Descripción
Especifica la cantidad de relleno superior entre el área de contenido y el borde de un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere al bloque contenedor. Los valores no pueden ser negativos.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
0.
Aplicable a
Todos los elementos salvo aquellos con un display de table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column.
¿Heredada?
No.

visibility

Descripción
Especifica si el elemento debe de ser visible o no.
Valores posibles
  • visible: El elemento es visible.
  • hidden: El elemento no es visible.
  • collapse: Si se aplica en una tabla a una fila, grupo de filas, columna o grupo de columnas, hace invisible el elemento y deja libre su espacio para el resto de contenido de la tabla, es decir, equivale a display:none; si se aplica a otro elemento fuera de estos cuatro, equivale a hidden.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
visible.
Aplicable a
Todos los elementos.
¿Heredada?
Sí.
Notas
A diferencia de display:none, visibility:hidden permite que el elemento siga afectando al flujo normal del documento, es decir, afecta a la posición de los elementos adyacentes, con la salvedad indicada para collapse.

Ver ejemplos de los valores de visibility.

width

Descripción
Especifica el ancho del área de contenido de un elemento.
Valores posibles
  • Una medida absoluta, relativa o porcentual. El porcentaje se refiere a la anchura del elemento padre.
  • auto: El agente de usuario calcula la anchura en relación con los demás elementos de manera automática.
  • inherit: El elemento hereda el valor del elemento padre para esta propiedad.
Valor por defecto
auto.
Aplicable a
Todos los elementos salvo elementos en línea no reemplazados, filas de tabla y grupos de filas.
¿Heredada?
No.

Ver ejemplos de los valores generales de width.

Notas

  1. Un elemento puede ser reemplazado —replaced— o no reemplazado —non-replaced—. El reemplazado es aquel cuyo contenido no se encuentra en el marcado, como por ejemplo una imagen: en el código aparece el elemento img, pero en realidad eso no es más que una referencia a un archivo que será incorporado por el navegador en el lugar del elemento. Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA