Ir directamente al contenido de esta página
id y classborderborder-colorborder-styleborder-widthborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-topborder-top-colorborder-top-styleborder-top-widthclipdisplayheightmarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthoverflowpaddingpadding-bottompadding-leftpadding-rightpadding-topvisibilitywidthborder [propiedad de conjunto]border-color, border-style y border-width.border-colortransparent: 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.color del elemento al que se ha aplicado.
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-stylenone: 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.none.transparent, o cuando el estilo muestra huecos, como en dotted.dotted y el ancho a 1 píxel, el borde se representa como dashed.border-color.Ver ejemplos de los valores de border-style.
border-widthmedium.border-color.Ver ejemplos de los valores de border-width.
border-bottom [propiedad de conjunto]border-bottom-color, border-bottom-style y border-bottom-width.border-bottom-colortransparent: 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.color del elemento al que se ha aplicado.border-bottom-stylenone: 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.none.border-bottom-widthmedium.border-left [propiedad de conjunto]border-left-color, border-left-style y border-left-width.border-left-colortransparent: 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.color del elemento al que se ha aplicado.border-left-stylenone: 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.none.border-left-widthmedium.border-right [propiedad de conjunto]border-right-color, border-right-style y border-right-width.border-right-colortransparent: 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.color del elemento al que se ha aplicado.border-right-stylenone: 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.none.border-right-widthmedium.border-top [propiedad de conjunto]border-top-color, border-top-style y border-top-width.border-top-colortransparent: 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.color del elemento al que se ha aplicado.border-top-stylenone: 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.none.border-top-widthmedium.clipauto.position:absolute.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.
#banner{
clip:rect(10px,140px,110px,40px);
}
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.
auto equivale a 0.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.
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:
display:run-in se convierte en el primer elemento en línea del elemento adyacente.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.inline.display:block.Ver ejemplos de los valores generales de display.
heightauto: 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.auto.Ver ejemplos de los valores generales de height.
margin [propiedad de conjunto]margin-bottom, margin-left, margin-right y margin-top.display tabular distinto de table, table-caption o inline-table.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:
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-bottomauto: En caso de que al elemento se le haya aplicado float, sea un elemento de bloque en el flujo normal del documento, se le haya aplicado position:relative, o sea un elemento en línea, equivale a 0. En cualquier otra circunstancia, sigue las reglas arcanas de la especificación para el cálculo automático de alturas y márgenes (inglés).inherit: El elemento hereda el valor del elemento padre para esta propiedad.0.display tabular distinto de table, table-caption o inline-table.margin-leftauto: En caso de que al elemento se le haya aplicado float, sea un elemento de bloque en el flujo normal del documento, se le haya aplicado position:relative, o sea un elemento en línea, equivale a 0. En cualquier otra circunstancia, sigue las reglas arcanas de la especificación para el cálculo automático de anchuras y márgenes (inglés).inherit: El elemento hereda el valor del elemento padre para esta propiedad.0.display tabular distinto de table, table-caption o inline-table.auto, el elemento se centra con respecto a los dordes del elemento padre.margin-rightauto: En caso de que al elemento se le haya aplicado float, sea un elemento de bloque en el flujo normal del documento, se le haya aplicado position:relative, o sea un elemento en línea, equivale a 0. En cualquier otra circunstancia, sigue las reglas arcanas de la especificación para el cálculo automático de anchuras y márgenes (inglés).inherit: El elemento hereda el valor del elemento padre para esta propiedad.0.display tabular distinto de table, table-caption o inline-table.auto, el elemento se centra con respecto a los dordes del elemento padre.margin-topauto: En caso de que al elemento se le haya aplicado float, sea un elemento de bloque en el flujo normal del documento, se le haya aplicado position:relative, o sea un elemento en línea, equivale a 0. En cualquier otra circunstancia, sigue las reglas arcanas de la especificación para el cálculo automático de alturas y márgenes (inglés).inherit: El elemento hereda el valor del elemento padre para esta propiedad.0.display tabular distinto de table, table-caption o inline-table.max-heightnone.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-widthnone.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-height0.height:auto.Ver ejemplos de los valores de min-height.
min-width0.width:auto.Ver ejemplos de los valores de min-width.
overflowvisible: 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.visible.display:inline-block.Ver ejemplos de los valores de overflow.
padding [propiedad de conjunto]padding-bottom, padding-left, padding-right y padding-top.border-color.Ver ejemplos de los valores de padding.
padding-bottom0.display de table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column.padding-left0.display de table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column.padding-right0.display de table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column.padding-top0.display de table-row-group, table-header-group, table-footer-group, table-row, table-column-group o table-column.visibilityvisible: 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.visible.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.
widthauto.Ver ejemplos de los valores generales de width.
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. 
