CSS-2.1: Dimensiones

ALTO DE ELEMENTO {height : x}

CSS21
Para especificar el alto de un elemento con los valores de x:
  • Medidas como px o porcentaje referido al bloque donde está contenido si su altura fue especificada, pues en otro caso el valor se convierte en auto
  • auto para que el navegador lo ajuste (VALOR INICIAL)
  • inherit (NO SE HEREDA)
No se permiten valores negativos. Se aplica a los elementos de bloque y de línea pero que estén reemplazados. No se puede aplicar a los elementos de línea no reemplazados pues su altura viene dada por el valor {line-height}, mientras que para los elementos de línea reemplazados, su altura viene dada por el contenido que se reemplaza. Un elemento es reemplazado si sus dimensiones vienen dadas por un contenido externo como sucede con los elementos img, input, textarea, select y object. Tampoco se aplica a columnas de tablas y grupos de columnas. En el alto no se incluye el grosor del borde, el margen exterior con el elemento padre ni el interior o margen de relleno, por lo que se refiere sólo al alto del área de contenido. El alto de imagenes y objetos viene dado por la dimensión de los mismos.

Ejemplo {height}

En el ejemplo siguiente mostramos el alto de elementos de bloque del tipo división:
<div style="border-style:solid; border-width:thin;">
    Párrafo divisor padre con un alto completado automáticamente por el 
    navegador.
    <div style="height:60px; border-style:solid; border-width:thin;">
        Bloque de párrafo divisor hijo con un alto absoluto de 60 píxeles.
    </div>
    Aquí continúa el texto del padre.
</div>
Resultado:
Párrafo divisor padre con un alto completado automáticamente por el navegador.
Bloque de párrafo divisor hijo con un alto absoluto de 60 píxeles.
Aquí continúa el texto del padre.
Ver también Dimensionado de elementos.

ALTURA DE LÍNEA {line-height : x}

CSS21
Permite declarar la cantidad de espacio de una línea de texto. Los valores de x pueden ser
  • Medidas como px o porcentaje referido al bloque donde está contenido si su altura fue especificada, pues en otro caso el valor se convierte en auto
  • Número, por el cual se múltiplicará el tamaño de la fuente del elemento
  • normal que debe ser ajustado por el navegador normalmente a los números 1.0 hasta 1.2 veces la altura de la fuente del elemento (VALOR INICIAL)
  • inherit (SE HEREDA)
Se aplica a todos los elementos excepto para los de línea reemplazados donde la altura queda especificada por la propiedad {height} . Cuando un elemento contiene texto con más de una fuente se usa la de mayor tamaño para computar este atributo.

Ejemplo {line-height}

En el ejemplo siguiente probamos varios valores.
<p>Párrafo de muestra con líneas <br />
sin aplicar line-height (se aplica el predeterminado).</p>

<p style="line-height:1;">Párrafo de muestra con líneas 
separadas con line-height:1, <br />
que equivale a una altura igual a 1 altura del tipo de letra.</p>

<p style="line-height:10px;">Párrafo de muestra con líneas 
separadas con line-height:10px, <br />
es decir, separadas 10 píxeles independientemente del tamaño de la 
letra.</p>

<p style="line-height:200%;">Párrafo de muestra con líneas 
separadas con line-height:200%, <br />
que equivale a una altura del 200% del tamaño de la letra.</p>
Resultado:

Párrafo de muestra con líneas
sin aplicar line-height (se aplica el predeterminado).

Párrafo de muestra con líneas separadas con line-height:1,
que equivale a una altura igual a 1 altura del tipo de letra.

Párrafo de muestra con líneas separadas con line-height:10px,
es decir, separadas 10 píxeles independientemente del tamaño de la letra.

Párrafo de muestra con líneas separadas con line-height:200%,
que equivale a una altura del 200% del tamaño de la letra.

Ver también altura del tipo de letra en {font-size}

ANCHO DE ELEMENTO {width : x}

CSS21
Para especificar ancho de un elemento de bloque y de elementos reemplazados (entre estos últimos también los elementos de línea), donde x puede tomar los valores
  • Medidas como px o porcentaje referido al bloque donde está contenido si su ancho fue especificado, pues en otro caso el valor se convierte en auto
  • auto que debe ser ajustado por el navegador según los valores de otras propiedades (VALOR INICIAL)
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos excepto elementos de línea no reemplazados, filas de tablas o grupos de filas. El ancho de los elementos de línea no reemplazados se fija al contenido generado (texto). En el ancho no se incluye el grosor del borde, el margen exterior con el elemento padre ni el interior o margen de relleno, por lo que se refiere sólo al ancho del área de contenido. El ancho de imagenes y objetos viene dado por la dimensión de los mismos.

Ejemplo {width}

En el ejemplo siguiente mostramos el ancho de bloques en línea tipo división:
<div style="border-style:solid; border-width:thin;">
    Párrafo divisor padre con un ancho completado por defecto 
    al del elemento superior que lo contiene.
    <div style="width:50%; border-style:solid; border-width:thin;">
        Bloque de párrafo divisor hijo con un ancho del 50% del 
        anterior elemento padre donde está contenido.
    </div>
    Aquí continúa el texto del padre.
</div>
Resultado:
Párrafo divisor padre con un ancho completado por defecto al del elemento superior que lo contiene.
Bloque de párrafo divisor hijo con un ancho del 50% del anterior elemento padre donde está contenido.
Aquí continúa el texto del padre.

Ejemplo {width}: Ancho de una tabla

Existe un atributo para especificar el ancho de una tabla con <table width>. Sin embargo en la especificación de tablas se recomienda el uso de estilos para especificar el ancho. Este es un ejemplo al respecto donde fijamos el ancho al 50% de la ventana. Hemos puesto también ese ancho a un elemento <div> para observar como se redibuja si cambiamos el ancho de la ventana del navegador.
Este cuadro azul 
<div style="border: solid blue 1px; width: 50%; "> </div>
tiene un ancho del 50% de la ventana disponible, mismo ancho que se fija 
para la tabla:                 
<table border="1" style="width: 50%; ">
    <tr><th>FECHA</th><th>CONCEPTO</th>
        <th>IMPORTE</th></tr>
    <tr><td>10/11/07</td><td>Factura</td>
        <td>3.540,26 €</td></tr>
    <tr><td>12/11/07</td><td>Gastos bancos</td>
        <td>150,36 €</td></tr>
    <tr><td> </td><td>TOTAL..........</td>
        <td>3.690,62 €</td></tr>
</table>
Resultado:
Este cuadro azul
 
tiene un ancho del 50% de la ventana disponible, mismo ancho que se fija para la tabla:
FECHACONCEPTOIMPORTE
10/11/07Factura3.540,26 €
12/11/07Gastos bancos150,36 €
 TOTAL..........3.690,62 €
Ver también Dimensionado de elementos.

BORDES {border-s : x}

CSS21
General {border} Resumido {border-s-t} Color {border-color} Espacio {border-spacing} Estilo {border-style} Grosor {border-width} Separación {border-collapse}

Para configurar los bordes. En un primer caso podemos hacer que s = color, width o style, tal que los valores de x pueden establecerse para dotar a uno o más bordes. Si se especifica 1 valor se aplica a los cuatro lados. Si se usan 2 valores el primero es para los bordes verticales y el segundo para los horizontales. Con 3 valores el primero y tercero son para el borde superior e inferior mientras que el segundo son para derecha e izquierda al mismo tiempo. Con 4 valores se sigue el sentido de las agujas del reloj comenzando por el superior, derecha, inferior e izquierda.

Pero también puede ser s = top-t, right-t, bottom-t o left-t, donde 't' puede tomar los significados color, style o width.

Si no se especifica 's' podemos configurar bordes generales para los cuatro bordes con una combinación de style, color, width.

Los valores de s = spacing, collapse se usan sólo para tablas. Puede ver una descripción detallada de como configurar los bordes de una tabla con estilos en dos sitios:

  • En el ejemplo expuesto en la propiedad {border-spacing}.
  • En el documento de Tablas, en el ejemplo de la propiedad <tabla border> cuando se usan estilos.

Bordes generales {border : x}

CSS21 Para especificar en uno o más bordes las subpropiedades color, width, style, color, grosor y estilo. El valor x puede ser:
  • Uno, dos o tres de los valores posibles para las propiedades siguientes, aunque debe especificarse al menos el estilo (ver en esas propiedades que valores admite):
  • inherit (NO SE HEREDA)
Por lo tanto con esta propiedad podemos designar color, estilo y ancho de los cuatro bordes al mismo tiempo. El valor inicial se puede observar en cada subpropiedad por separado.

Ejemplo {border}

Ejemplo de un bloque en línea con un borde sólido fino de color verde. <span style="border:solid green thin;"> span bordeado</span>
Resultado:
span bordeado

Ejemplo {border} en tablas

Como esta propiedad no se hereda, si la aplicamos a una tabla le incluye sólo un borde externo (de color azul en el ejemplo) no configurando ningún borde para las celdas, aunque puede aplicarse a las celdas individualmente, tal como hacemos con todas las de la última columna en borde rojo. Por defecto se aplica una espaciado de 2px entre bordes internos. Si todas las celdas deben tener la misma forma es mejor configurar los bordes en el estilo interno o externo de todas al mismo tiempo. Un ejemplo de esto puede verlo en {border-spacing}, donde se configura el espacio entre bordes internos. De todas formas este ejemplo con estilo local es:
<table border="style="border:solid 1px blue; " >
<tr><td>FECHA</td>	<td>CONCEPTO</td>
<td  style="border:solid 1px red; ">IMPORTE</td></tr>
<tr><td>10/11/07</td>	<td>Factura</td>
<td  style="border:solid 1px red; ">3.540,26 €</td></tr>
<tr><td>12/11/07</td>	<td>Gastos bancos</td>
<td  style="border:solid 1px red; ">150,36 €</td></tr>
<tr><td>&nbsp;</td><td>TOTAL..........</td>
<td  style="border:solid 1px red; ">3.690,62 €</td></tr>
</table>
Resultado:
FECHACONCEPTOIMPORTE
10/11/07Factura3.540,26 €
12/11/07Gastos bancos150,36 €
 TOTAL..........3.690,62 €
Hay un ejemplo de bordes aplicados a una tabla en Border-spacing.html.

Bordes resumidos {border-s-t : x}

Para especificar uno o varios bordes de forma resumida. Las opciones pueden ser:
  • CSS21 Especificando en 's' un lado (top, right, bottom, left) que se desea configurar y sin dar significado a 't', resultando la siguientes propiedades:
    • {border-top}
    • {border-right}
    • {border-bottom}
    • {border-left}
    Se le dota de valor general como se especifica en {border}
  • Especificando en 's' un lado top, right, bottom, left y en 't' una propiedad style, color, width, dotándole de estilo tal como se especifica en las correspondientes {border-style}, {border-color}, {border-width} resultando las siguientes propiedades que se desglosan para los distintos valores de 's':

Ejemplo {border-top} y {border-bottom}

En el ejemplo se expone lo explicado. En el primero se configura el borde superior y en el segundo ejemplo configuramos el estilo del borde inferior.
<span style="border-top:solid red thick;">[Borde superior sólido rojo]</span>
<span style="border-bottom-style:double;">[Borde inferior doble al color del padre]</span>
Resultado:
[Borde superior sólido rojo] [Borde inferior doble al color del padre]
Ver {border}, {border-color}, {border-style}, {border-width}.

Color del borde {border-color : x}

CSS21 Color de uno, dos, tres o cuatro bordes, donde x toma los valores:
  • Uno, dos, tres o cuatro valores separados por espacios de
    • Colores o de
    • La palabra clave transparent
    aplicándose de la siguiente forma
    • Con un valor se aplica por igual a todos los lados
    • Con dos valores se aplica el primero a los bordes superior e inferior y el segundo a los bordes derecho e izquierdo
    • Con tres valores se aplica el primero al superior, el segundo a los bordes derecho e izquierdo y el tercero al inferior
    • Con cuatro valores se aplica uno a cada borde siguiendo el sentido de las agujas del reloj: superior, derecho, inferior e izquierdo.
  • inherit (NO SE HEREDA)
Si no se especifica un color se tomará el valor de color declarado para el elemento al cual se le está dotando de bordes.

Ejemplo {border-color}

Usando el valor transparent podemos realizar cualquier combinación de colores en los bordes y no sólo las señaladas más arriba.
<div style="border:solid 1px; ">
    Este bloque división contiene <br /><br />
    un span
    <span style="border-style:solid; border-width:5px; 
    border-color:red purple transparent blue; 
    background-color:yellow; ">
        con bordes de colores
    </span><br /><br />
    donde se aprecia el borde inferior transparente.
</div>
Resultado:
Este bloque división contiene

un span con bordes de colores

donde se aprecia el borde inferior transparente.

Espacio entre bordes de una tabla (sólo tablas) {border-spacing : x}

CSS21 Para añadir espacio entre los bordes de las celdas adyacentes en una tabla. Los valores de x son:
  • Una o dos medidas (VALOR INICIAL 0). Con una medida se especifica tanto los espacios horizontales como verticales. Si se dan dos medidas la primera especifica el espacio horizontal y la segunda el vertical.
  • inherit (SE HEREDA)
Se aplica al elemento <table>, donde también se expone un ejemplo al respecto usando estilos para configurar los bordes.

Ejemplo {border-spacing}: Configurando bordes de tabla con estilos

En este ejemplo confeccionamos una página para mostrar tres tablas. Una con bordes configurados con los atributos de la tabla <table cellspacing>, que equivale a este atributo de estilo {border-spacing}, y <table cellpadding> que equivale al atributo de estilo {padding}.

Luego se presentan dos tablas configuradas con estilo, pero usando el atributo {border-collapse} con los valores separate para mantener separados los bordes y collapse para no dejar separación entre los bordes.

El código de los atributos de la primera tabla es el siguiente:

<table class="sin-css" cellspacing="0" cellpadding="5" border="1">

El código del estilo de las dos siguientes tablas, configurándose tanto el borde de la tabla <table> como el de las celdas <td> es el siguiente:

/**Tabla con bordes separados por el valor 'separate'**/   
table.con-css-separate {border:red solid 1px; border-collapse:separate; 
    border-spacing:5px 8px; }
table.con-css-separate td {border:blue solid 1px; padding:5px;  }    
               
/**Tabla sin separación entre bordes por el valor 'collapse'**/            
table.con-css-collapse {border:red solid 1px; border-collapse:collapse; }
table.con-css-collapse td {border:blue solid 1px; padding:5px; }
Resultado:
Ver resultado comentado en Border-spacing.html.

Estilo del borde {border-style : x}

CSS21 Para especificar el estilo del borde con los valores de x siguientes:
  • De uno a cuatro valores de
    • none: ningún borde, forzando el grosor a 0 (VALOR INICIAL)
    • hidden: igual a none, oculta los bordes
    • dotted: borde punteado
    • dashed: borde rayado
    • solid: borde continuo con una línea
    • double: borde continuo doble. El grosor del borde será la suma del grosor de las dos líneas y el espacio entre ellas
    • groove: borde cincelado
    • ridge: opuesto al anterior, resaltado
    • inset: borde empotrado
    • outset: opuesto al anterior, borde saliente
    Los valores se aplican como sigue:
    • Con 1 valor se aplica el estilo a los cuatro lados.
    • Con 2 valores se aplica el primero a los bordes superior e inferior y el segundo a los bordes derecho e izquierdo.
    • Con 3 valores se aplica el primero al borde superior, el segundo a los bordes derecho e izquierdo y el tercero al borde inferior.
    • Con 4 valores se aplica siguiendo el sentido de las agujas del reloj: el primero al borde superior, el segundo al derecho el tercero al inferior y el cuarto al izquierdo.
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {border-style}

En el ejemplo se expone una muestra de cada valor. Algunos navegadores no presentan ciertas combinaciones de estilo, color y grosor sobre todo para los bordes dobles y cincelados (double, groove, ridge, inset, outset) cuando el grosor no es el adecuado, en cuyo caso es conveniente dotarlo de un color no muy oscuro así como no forzar el grosor por debajo del mínimo que necesita para mostrarse.
span style="border-style:dotted; border-color:red; border-width:1px;">dotted</span>	
<span style="border-style:dashed; border-color:red; border-width:1px;">dashed</span>	
<span style="border-style:solid; border-color:red; border-width:1px;">solid</span>	
<span style="border-style:double; border-color:blue; border-width:thick;">double</span>	
<span style="border-style:groove; border-color:silver; border-width:thick;">groove</span>	
<span style="border-style:ridge; border-color:yellow; border-width:thick;">ridge</span>
<span style="border-style:inset; border-color:aqua; border-width:thick;">inset</span>	
<span style="border-style:outset; border-color:lime; border-width:thick;">outset</span>
Resultado:
dotted dashed solid double groove ridge inset outset

Ejemplo {border-style}: Falso botón

Ejemplo de como configurar bordes para que un vínculo tenga el aspecto de un botón usando el valor outset. Se trata de dotar a un elemento vínculo <a> de algunas propiedades para que parezca un botón.
<a name="xx" />Aspecto de botón para un vínculo: 
<a href="#xx" style="text-decoration:none; border-style:outset; 
border-color:rgb(225, 225, 225); background-color:rgb(225, 225, 225); 
padding-left:5px; padding-right:5px; color:black;">Aceptar</a>
Resultado:
Aspecto de botón para un vínculo: Aceptar

Ejemplo {border-style}: Botones falsos con vínculos

Aunque estos ejemplos no tengan utilidad para construir botones prácticos, si nos sirve para experimentar con las propiedades de estilo. En este sentido podemos mejorar el ejemplo anterior usando lo expuesto en los selectores por pseudo-clases acerca de como seleccionar el estado de un vínculo para dotarle de un estilo. Para ello clasificamos un vínculo <a> de una clase como, por ejemplo, "boton": <a class="boton" href="#xx"> botón de muestra</a>. Habría que hacer lo siguiente:
  • Establecer el estilo externo en un archivo css de un vínculo de la clase botón. Para ello definimos en primer lugar el estilo para el elemento en sí mismo con a.boton {...}, dotándole de ninguna decoración de subrayados, borde resaltado (outset), colores, cambio de cursor a tipo flecha (default) y un relleno igual por todos los lados (así como otras propiedades que considere de interés).
  • Este relleno es importante porque luego definimos la selección por vínculo cincelado (inset), color más oscuro y que el relleno haga desplazar el texto hacia la derecha, dando la impresión de que se pulsa el botón. Veáse que ahora incrementamos el relleno izquierdo (pasa de 0.25 a 0.35, es decir +0.10) la misma cantidad que decrementamos el derecho (0.25 - 0.10 = 0.15).
  • Por último sólo resta redefinir también el botón en estado de visitado con a.boton:visited {...}, volviendo a darle las características iniciales que fueron modificadas cuando fue activado.
El código del estilo es el siguiente:
body {padding: 1em; font-family: 'Palatino Linotype'; }
a.boton {text-decoration: none; border-style: outset; border-color: rgb(225, 225, 225); 
background-color: rgb(225, 225, 225); padding: 0.25em; color: black; font-family: 'sans-serif'; 
cursor: default; }
a.boton:link {text-decoration: none; }
a.boton:visited {border-style: outset; background-color: rgb(225, 225, 225); padding: 0.25em; }
a.boton:focus {border-style: none; }
a.boton:hover {color: blue; }
a.boton:active {border-style: inset; color: navy; background-color: rgb(150, 150, 150); 
padding-left: 0.35em; padding-right: 0.15em; }
Resultado:
Ver la página de ejemplo Boton-vinculado.html.
También puede consultar el ejemplo Bordes con imagen para ver una aplicación de bordes configurados con una imagen de fondo que se repite en mosaico.

Grosor del borde {border-width : x}

CSS21 Para especificar el grosor del borde donde x toma los valores siguientes:
  • De uno a cuatro valores de:
    • thin: borde fino
    • medium: borde mediano
    • thick: borde grueso
    • Una medida como px (no aplica porcentajes)
    Si se aplica
    • Un valor se dotarán todos los bordes
    • Dos valores, se dotará el primero para los bordes superior e inferior y el segundo para los bordes derecho e izquierdo
    • Tres valores, se dotarán el primero para el superior, el segundo para el derecho e izquierdo, el tercero para el inferior
    • Cuatro valores, se dotarán siguiendo el sentido de las agujas del reloj: superior, derecho, inferior e izquierdo
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {border-width}

Ejemplo de un span con bordes: 
<span style="border-style:solid; border-width:thin medium thick 10px; ">
    superior: thin, derecho: medium, inferior: thick, izquierdo: 10px
</span>
Resultado:
Ejemplo de un span con bordes: superior: thin, derecho: medium, inferior: thick, izquierdo: 10px

Separación entre bordes de una tabla (sólo tablas) {border-collapse : x}

CSS21 Para seleccionar un modelo de bordes para una tabla, según los valores de x siguientes:
  • collapse: modelo de bordes cerrados donde no hay separación entre los bordes de las celdas.
  • separate: modelo de bordes separados, donde la separación entre las celdas se da por defecto en unos 2px (VALOR INICIAL), aunque puede actuarse sobre esta separación con {border-spacing} (en esa propiedad también se expone un ejemplo completo de como configurar bordes de una tabla).
  • inherit (SE HEREDA)
Se aplica exclusivamente al elemento <table>, donde también se expone un ejemplo para configurar bordes de tabla con estilos.

Ejemplo {border-collapse}

En este ejemplo y los siguientes exponemos cuatro tablas usando esta propiedad. Se utilizan distintas combinaciones con el atributo <table border> y con <table rules>. La primera tabla usa el atributo con 'collapse' pero no se especifican bordes de ningún tipo:
<table style="border-collapse:collapse; ">
    <tr><td >Celda (1,1)</td><td>Celda (1,2)</td></tr>
    <tr><td>Celda (2,1)</td><td>Celda (2,2)</td></tr>                   
</table>
Resultado:
Esta es una tabla con bordes cerrados 'collapse'. Por defecto deberían ocultarse los bordes internos y, dado que no se especifica ningún borde para la tabla, ésta tampoco mostrará un borde externo.
Celda (1,1)Celda (1,2)
Celda (2,1)Celda (2,2)

Ejemplo {border-collapse} especificando bordes

Este ejemplo también usa el valor 'collapse' pero especificamos bordes:
<table border="1" rules="all" style="border-collapse:collapse; ">
    <tr><td >Celda (1,1)</td><td>Celda (1,2)</td></tr>
    <tr><td>Celda (2,1)</td><td>Celda (2,2)</td></tr>                   
</table>
Resultado:
La misma tabla con bordes cerrados 'collapse'. Sin embargo ahora forzamos un borde externo de 1px con 'border="1"' y también a que muestre todos los bordes internos con la propiedad 'rules="all'.
Celda (1,1)Celda (1,2)
Celda (2,1)Celda (2,2)

Ejemplo {border-collapse}: Valor separate

En este ejemplo usamos el valor 'separate' sin especificar bordes:
<table style="border-collapse:separate; ">
    <tr><td>Celda (1,1)</td><td>Celda (1,2)</td></tr>
    <tr><td>Celda (2,1)</td><td>Celda (2,2)</td></tr>                     
</table>
Resultado:
Esta es una tabla con bordes separados 'separate' que es también el valor inicial. Como no se muestra el atributo 'border' para la tabla, no debe mostrar bordes de ningún tipo.
Celda (1,1)Celda (1,2)
Celda (2,1)Celda (2,2)

Ejemplo {border-collapse}: Valor separate y atributo de borde especificado en la tabla

Nuevamente con 'separate' pero especificando el atributo 'border' para la tabla:
<table border="10" style="border-collapse:separate; ">
    <tr><td>Celda (1,1)</td><td>Celda (1,2)</td></tr>
    <tr><td>Celda (2,1)</td><td>Celda (2,2)</td></tr>                     
</table>
Resultado:
La tabla con bordes separados 'separate' pero ahora dotamos al atributo 'border="10"' de la tabla, mostrándose todos los bordes con una separación por defecto de 2px y aplicando los 10px al borde externo.
Celda (1,1)Celda (1,2)
Celda (2,1)Celda (2,2)

Ejemplo {border-collapse}: igualando separaciones

Por último hacemos que el borde externo tenga la misma separación que los internos:
<table border="1" style="border-collapse:separate; ">
    <tr><td>Celda (1,1)</td><td>Celda (1,2)</td></tr>
    <tr><td>Celda (2,1)</td><td>Celda (2,2)</td></tr>                     
</table>
Resultado:
Pero si en el caso anterior damos un borde de 1px menor que el por defecto se establece por defecto para 'separate', entonces el borde externo tendrá la misma separación por defecto de 2px.
Celda (1,1)Celda (1,2)
Celda (2,1)Celda (2,2)
En {visibility} con su valor collapse podemos ocultar filas y/o columnas completamente.

CONTORNOS DINÁMICOS {outline-s : x}

CSS21
General {outline} Ancho {outline-width} Estilo {outline-style} Color {outline-color}
Los contornos se pueden aplicar alrededor de objetos como botones, campos de formularios que tienen el foco, etc. A diferencia de la propiedad {border}, los contornos no ocupan espacio pues se dibujan encima del contenedor. Se dibuja a partir del límite exterior del borde, tal como se explica en dimensionado. Además no han de ser necesariamente rectangulares y es el mismo en todos los lados.

Contorno general {outline : x}

CSS21 Para declarar de forma general de un contorno siendo x uno de los valores siguientes:
  • Uno, dos o tres de los siguientes valores para el color, estilo y grosor del contorno:
    • Un valor de entre los siguientes
      • Un color
      • invert (VALOR INICIAL), invierte los colores.
    • Un estilo de entre los siguientes:
      • none: ningúno, forzando el grosor a 0 (VALOR INICIAL)
      • hidden: igual a none, oculta el contorno
      • dotted: punteado
      • dashed: rayado
      • solid: continuo con una línea
      • double: continuo doble.
      • groove: cincelado
      • ridge: opuesto al anterior, resaltado
      • inset: empotrado
      • outset: opuesto al anterior, saliente
    • Un ancho de entre los siguientes:
      • thin: borde fino
      • medium: borde mediano (VALOR INICIAL)
      • thick: borde grueso
      • Una medida como px
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos.

Ejemplo {outline}

Ejemplo de un elemento con contorno.
<span style="outline: green dotted 2px; border: red solid 5px; 
margin: 5px;">contorneado</span>
Resultado:
En esta división se incluye un
elemento en línea con borde rojo de 5px contorneado
con puntos verdes de 2px de grosor.

Grosor del contorno {outline-width : x}

CSS21 Para especificar el grosor del contorno donde x toma uno de los valores siguientes:
  • Un valor entre:
    • thin: fino
    • medium: mediano (VALOR INICIAL)
    • thick: grueso
    • Una medida como px
  • inherit (NO SE HEREDA)

Ejemplo {outline-width}

Ejemplo para mostrar como el grosor del contorno se comienza a dibujar a partir del borde y ocupando el espacio del margen e incluso otros elementos contiguos.
...en línea 
<span style="outline-width: 10px; outline-style: solid; outline-color: lime; 
    border: red solid 5px; ">
    elemento 1
</span>
<span style="outline-width: 10px; outline-style: solid; outline-color: aqua; 
    border: orange solid 5px; ">
    elemento 2
</span> 
contiguos...
Resultado:
En esta división se incluyen dos elementos, el primero con borde rojo y el segundo con borde naranja.
Son elementos en línea elemento 1 elemento 2 contiguos. El contorno no ocupa espacio y se limita a extenderse desde el límite exterior del borde hacia afuera en el espacio de su margen, como se observa en la parte derecha del contorno del elemento 1 y la parte izquierda del 2. El contorno de éste se dibuja encima del anterior y sobre los elementos circundantes si fuera preciso (si no se le dota de margen suficiente).

Estilo de contorno {outline-style : x}

CSS21 Para especificar el estilo del contorno con donde x toma uno de los valores siguientes:
  • Un valor entre los siguientes
    • none: ninguno, forzando el grosor a 0 (VALOR INICIAL)
    • hidden: igual a none, oculta el contorno
    • dotted: punteado
    • dashed: rayado
    • solid: continuo con una línea
    • double: continuo doble
    • groove: cincelado
    • ridge: opuesto al anterior, resaltado
    • inset: empotrado
    • outset: opuesto al anterior, saliente
  • inherit (NO SE HEREDA)

Ejemplo {outline-style}

Ejemplo con estilos de contorno en color naranja disponibles. El borde se muestra en azul. Entre dos muestras se inserta un elemento en línea con margen para separar aquellos.
<span style="outline-style: dotted; outline-color: orange;  outline-width: 3px; 
border: blue solid 1px; ">dotted</span><span style="margin-right: 10px;"> </span>	
<span style="outline-style: dashed; outline-color: orange; outline-width: 3px; 
border: blue solid 1px; ">dashed</span><span style="margin-right: 10px;"> </span>	
<span style="outline-style: solid; outline-color: orange; outline-width: 3px; 
border: blue solid 1px; ">solid</span><span style="margin-right: 10px;"> </span>	
<span style="outline-style: double; outline-color: orange; outline-width: thick; 
border: blue solid 1px; ">double</span><span style="margin-right: 10px;"> </span>	
<span style="outline-style: groove; outline-color: orange; outline-width: thick; 
border: blue solid 1px; ">groove</span><span style="margin-right: 10px;"> </span>	
<span style="outline-style: ridge; outline-color: orange; outline-width: thick; 
border: blue solid 1px; ">ridge</span><span style="margin-right: 10px;"> </span>
<span style="outline-style: inset; outline-color: orange; outline-width: thick; 
border: blue solid 1px; ">inset</span><span style="margin-right: 10px;"> </span>	
<span style="outline-style: outset; outline-color: orange; outline-width: thick; 
border: blue solid 1px; ">outset</span><span style="margin-right: 10px;"> </span>
Resultado:
dotted dashed solid double groove ridge inset outset

Color de contorno {outline-color : x}

CSS21 Especificar el color del contorno, donde x toma uno de los valores siguientes:
  • Un color
  • invert para invertir los colores
  • inherit (NO SE HEREDA)

Ejemplo {outline-color}

Ejemplo usando el color invert.
...contorno de  
<span style="outline-color: red; outline-style: solid; outline-width: 3px; 
border: lime solid 2px; ">color "red"</span>
y otro con contorno de 
<span style="outline-color: invert; outline-style: solid; outline-width: 3px; 
border: lime solid 2px; ">color "invert"</span>
<br />
El de color...
Resultado:
En esta división con fondo de color amarillo
disponemos dos elementos en línea, uno con contorno de color "red" y otro con contorno de color "invert"
El de color "invert" modifica el color amarillo del fondo en azul (aunque no exactamente igual en todos los navegadores).

Ejemplo {outline-color}: botón con contorno

En este ejemplo creamos un botón vinculado dotándole de contorno cuando se sitúa el cursor sobre el mismo. El código se expone también en la página.
Resultado:
Ver el resultado en boton-vinculado2.html .
Ver también {border}.

MÁRGENES {margin-s : x}

CSS21
Generales {margin} Superior {margin-top} Derecho {margin-right} Inferior {margin-bottom} Izquierdo {margin-left}
Para declarar los márgenes de un elemento. Los valores de 's' pueden dan lugar a {margin-top}, {margin-right}, {margin-bottom}, {margin-left}. Si no se especifica 's' podemos configurar de 1 a 4 márgenes de forma general. Los márgenes de un elemento son los espacios transparentes a su alrededor, que suponen la separación entre un elemento y los que están a su alrededor. Para verlo con detalle consultar el dimensionado de elementos.

Márgenes generales {margin : x}

CSS21 Para especificar los márgenes de una forma general donde x puede valer:
  • De 1 a 4 valores para especificar el ancho del márgen, valores que puede ser:
    • Medidas como px o porcentaje en cuyo caso se calcula con respecto al ancho del contenedor
    • auto
    Con 1 valor se aplicará a los cuatro margenes. Con 2 valores el primero se aplica a los márgenes superior e inferior y el segundo a los izquierdo y derecho. Si se declaran 3 valores, el primero y el último se dedican al margen superior e inferior respectivamente, mientras que el central especifica el derecho e izquierdo. Con los 4 valores especificados se indican el superior, derecha, inferior e izquierda. El VALOR INICIAL no queda definido cuando se usan propiedades resumidas. Es posible usar valores negativos, aunque no se asegura siempre su correcta implantación.
  • inherit (NO SE HEREDA)
Según CSS2 se aplica a todos los elementos, pero CSS21 hace unas excepciones para algunos elementos de <table>.

Ejemplo {margin}

En este ejemplo insertamos una primera división y luego otra para ver como ésta se separa de la anterior.
<div style="color:blue; border-style:solid; border-width:thin;">Una 
división.</div>
<div style="color:red; border-style:solid; border-width:thin; 
margin:5% 0 0 0;">Una división seguida de la anterior y con un 
margen superior de un 5% (porcentaje referido al ancho de esta 
división), pero no separada en el resto de los márgenes.</div>
Resultado:
Una división.
Una división seguida de la anterior y con un margen superior de un 5% (porcentaje referido al ancho de esta división), pero no separada en el resto de los márgenes.

Ejemplo {margin}: Centrar elementos con CSS

Una forma de alinear un elemento centrándolo respecto a la ventana del navegador es mediante el valor auto para el ancho de los márgenes. En este ejemplo centramos una tabla:
<table border="1" style="margin:auto; " >
    <tr><td>celda</td><td>celda</td></tr>
    <tr><td>celda</td><td>celda</td></tr>
</table>
Resultado:
celdacelda
celdacelda

Margen superior {margin-top : x}

CSS21 Para declarar el margen superior de un elemento. El valor de x puede ser:
  • Medidas como px o porcentajes, en cuyo caso se calcula con respecto al ancho del contenedor
  • auto
  • inherit (NO SE HEREDA)
El VALOR INICIAL es 0. Según CSS2 se aplica a todos los elementos, pero CSS21 hace unas excepciones para algunos elementos de <table>. También expone que no tienen efecto en elementos en línea no reemplazados los márgenes {margin-top}, {margin-bottom}.

Ejemplo {margin-top}

En el ejemplo vemos una división que se separa de la anterior.
<div style="color:blue; border-style:solid; border-width:thin;">Una 
división.</div>
<div style="color:red; border-style:solid; border-width:thin; 
margin-top:5%;">Una división con un margen superior de un 5% 
(porcentaje referido al ancho de esta división).</div>
Resultado:
Una división.
Una división con un margen superior de un 5% (porcentaje referido al ancho de esta división).
Ver {margin}

Margen derecho {margin-right : x}

CSS21 Para declarar el margen derecho de un elemento. El valor de x puede ser:
  • Medidas como px o porcentaje, en cuyo caso se calcula con respecto al ancho del contenedor
  • auto
  • inherit (NO SE HEREDA)
El VALOR INICIAL es 0. Según CSS2 se aplica a todos los elementos, pero CSS21 hace unas excepciones para algunos elementos de <table>. También expone que no tienen efecto en elementos en línea no reemplazados los márgenes {margin-top}, {margin-bottom}.

Ejemplo {margin-right}

En el ejemplo vemos una división separada del margen derecho.
<div style="color:blue; border-style:solid; border-width:thin;">Una 
división.</div>
<div style="color:red; border-style:solid; border-width:thin; 
margin-right:5%;">Una división con un margen derecho de un 5% 
(porcentaje referido al ancho de esta división).</div>
Resultado:
Una división.
Una división con un margen derecho de un 5% (porcentaje referido al ancho de esta división).
Ver {margin}

Margen inferior {margin-bottom : x}

CSS21 Para declarar el margen inferior de un elemento. El valor de x puede ser:
  • Medidas como px o porcentajes, en cuyo caso se calcula con respecto al ancho del contenedor
  • auto
  • inherit (NO SE HEREDA)
El VALOR INICIAL es 0. Según CSS2 se aplica a todos los elementos, pero CSS21 hace unas excepciones para algunos elementos de <table>. También expone que no tienen efecto en elementos en línea no reemplazados los márgenes {margin-top}, {margin-bottom}.

Ejemplo {margin-bottom}

En este ejemplo vemos una división que se separa de la que le sigue por debajo.
<div style="color:blue; border-style:solid; border-width:thin;">Una 
división.</div>
<div style="color:red; border-style:solid; border-width:thin; 
margin-bottom:5%;">Una división con un margen inferior de un 5% 
(porcentaje referido al ancho de esta división).</div>
<div style="color:blue; border-style:solid; border-width:thin;">Otra 
división.</div>
Resultado:
Una división.
Una división con un margen inferior de un 5% (porcentaje referido al ancho de esta división).
Otra división.
Ver {margin}

Margen izquierdo {margin-left : x}

CSS21 Para declarar el margen izquierdo de un elemento. El valor de x puede ser:
  • Medidas como px o porcentajes, en cuyo caso se calcula con respecto al ancho del contenedor
  • auto
  • inherit (NO SE HEREDA)
El VALOR INICIAL es 0. Según CSS2 se aplica a todos los elementos, pero CSS21 hace unas excepciones para algunos elementos de <table>. También expone que no tienen efecto en elementos en línea no reemplazados los márgenes {margin-top}, {margin-bottom}.

Ejemplo {margin-left}

En el siguiente ejemplo vemos una división separada del margen izquierdo.
<div style="color:blue; border-style:solid; border-width:thin;">Una 
división.</div>
<div style="color:red; border-style:solid; border-width:thin; 
margin-left:5%;">Una división con un margen izquierdo de un 5% 
(porcentaje referido al ancho de esta división), que en este 
caso lo separa del elemento padre que lo contiene.</div>
Resultado:
Una división.
Una división con un margen izquierdo de un 5% (porcentaje referido al ancho de esta división), que en este caso lo separa por ese lado del elemento padre que lo contiene.

Ejemplo {margin-left}: Alinear con la propiedad de márgenes

Una forma de alinear un elemento a la derecha es dotándolo del valor auto a su margen izquierdo y del valor 0 a su margen derecho, como hacemos con este elemento tabla:
<table style="margin-left:auto; margin-right:0;" >
<tr>
    <td>FECHA</td><td>CONCEPTO</td><td>IMPORTE</td>
</tr>
<tr>
    <td>10/11/07</td><td>Factura</td><td>3.540,26 €</td>
</tr>
<tr>
    <td>12/11/07</td><td>Gastos bancos</td><td>150,36 €</td>
</tr>
<tr>
    <td>&nbsp;</td><td>TOTAL..........</td><td>3.690,62 €</td>
</tr>
</table>
Resultado:
FECHACONCEPTOIMPORTE
10/11/07Factura3.540,26 €
12/11/07Gastos bancos150,36 €
 TOTAL..........3.690,62 €
Ver {margin}
Ver Dimensionado. También puede actuar mostrando partes de un elemento con {clip}.

MÁXIMAS MEDIDAS {max-s : x}

Máxima altura {max-height} Máxima anchura {max-width}
Para declarar la altura o anchura máxima de un elemento.

Máxima altura de un elemento {max-height : x}

CSS21 Para declarar la máxima altura que debe tener un elemento. Los posibles valores de x son:
  • Una medida como px. o porcentaje que se calcula respecto al alto del bloque contenedor, pero si el alto del contenedor no fue especificado explícitamente y además no está posicionado de forma absoluta, entonces el porcentaje se modifica a none.
  • none, pues no hay limitación de máxima altura (VALOR INICIAL)
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos excepto en lína no reemplazados, columnas y grupos de columnas en tablas.

Ejemplo {max-height}

En el siguiente ejemplo se muestra como podemos limitar el alto a una división. En todo caso sólo se aplica a divisiones de primer nivel y no a otras interiores donde las medidas pueden quedar establecidas por elementos padre. En el estilo interno tenemos una división que no queremos que sea superior a 300px más margenes, para lo cual limitamos su alto. Por supuesto que si el texto ocupa más altura se saldrá por la parte inferior, pues la altura de los elementos se establece automáticamente por el navegador según lo que ocupe el texto, para lo cual establecemos overflow=auto para que ponga una barra de desplazamiento vertical si la necesita. El código del estilo interno es el siguiente:
.menu-lateral {position:fixed; top:15px; left:5px; width:150px; 
border-style:double; padding:5px;}
.contenido {max-height:300px; overflow:auto; margin-left:170px; border-style:dotted; 
border-width:1px; padding:5px; }
Resultado:
En Max-height.html hemos limitado el alto al máximo.

Máxima anchura de un elemento {max-width : x}

CSS21 Para declarar la máxima anchura que debe tener un elemento. Los posibles valores de x son:
  • Una medida como px. o porcentaje que se calcula respecto al ancho del bloque contenedor, pero si el ancho del contenedor dependía del ancho de sus elementos entonces el valor del atributo queda indefinido.
  • none, pues no hay limitación de máxima anchura (VALOR INICIAL)
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos excepto en lína no reemplazados, columnas y grupos de columnas en tablas.

Ejemplo {max-width}

En el siguiente ejemplo se muestra como podemos limitar el ancho a una división. En todo caso sólo se aplica a divisiones de primer nivel y no a otras interiores donde las medidas pueden quedar establecidas por elementos padre. En el estilo interno tenemos una división que no queremos que sea superior a 300px más márgenes, para lo cual limitamos su ancho. El código del estilo interno es el siguiente:
.menu-lateral {position:fixed; top:15px; left:5px; width:150px; 
border-style:double; padding:5px;}
.contenido {max-width:300px; margin-left:170px; border-style:dotted; 
border-width:1px; padding:5px; }
Resultado:
En Max-width.html hemos limitado el ancho al máximo.
Ver también {min-s}, Dimensionado.

MÍNIMAS MEDIDAS {min-s : x}

Mínima altura {min-height} Mínima anchura {min-width}
Para declarar la altura o anchura mínima de un elemento.

Mínima altura de un elemento {min-height : x}

CSS21 Para declarar la mínima altura que debe tener un elemento. Los posibles valores de x son:
  • Una medida como px. o porcentaje que se calcula respecto al alto del bloque contenedor, pero si el alto del contenedor no fue especificado explícitamente y además no está posicionado de forma absoluta, entonces el porcentaje se modifica al valor 0.
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos excepto en lína no reemplazados, columnas y grupos de columnas en tablas.

Ejemplo {min-height}

En el siguiente ejemplo se muestra como podemos limitar el alto a una división. En todo caso sólo se aplica a divisiones de primer nivel y no a otras interiores donde las medidas pueden quedar establecidas por elementos padre. En el estilo interno tenemos una división que, aunque no tenga texto suficiente, nunca su alto sea menor que 4em:
.menu-lateral {position:fixed; top:15px; left:5px; width:150px; 
border-style:double; padding:5px;}
.contenido {min-height:4em; margin-left:170px; border-style:dotted; 
border-width:1px; padding:5px; }
Resultado:
En Min-height.html hemos limitado el alto al mínimo.

Mínima anchura de un elemento {min-width : x}

CSS21 Para declarar la mínima anchura que debe tener un elemento. Los posibles valores de x son:
  • Una medida como px o un porcentaje que se calcula respecto al ancho del bloque contenedor, pero si el ancho del contenedor dependía del ancho de sus elementos entonces el valor del atributo queda indefinido. (VALOR INICIAL 0).
  • inherit (NO SE HEREDA)
Se aplica a todos los elementos excepto en lína no reemplazados, columnas y grupos de columnas en tablas.

Ejemplo {min-width}

En el siguiente ejemplo se muestra como podemos limitar el ancho a una división. En todo caso sólo se aplica a divisiones de primer nivel y no a otras interiores donde las medidas pueden quedar establecidas por elementos padre. En el estilo interno tenemos una división que no queremos que sea inferior a 300px, para lo cual limitamos su ancho. Hemos puesto otra división de un ancho de 300px para ver hasta donde se limita. Se comprueba reduciendo el ancho de la ventana del navegador. El código del estilo interno es el siguiente:
.menu-lateral {position:fixed; top:15px; left:5px; width:150px; 
border-style:double; padding:5px;}
.contenido {min-width:300px; margin-left:170px; border-style:dotted; 
border-width:1px; padding:5px; }
.regla {width:300px; min-width:300px; border:solid 1px; color:red; 
margin-left:170px;}
Resultado:
Puede ver el efecto si no se limita el ancho en Fixed.html reduciendo el ancho de la ventana y comprobando como el texto del contenido se sale de su división cuando ya no cabe. En Min-width.html hemos limitado el ancho al mínimo.
Ver también {max-s}, Dimensionado.

RELLENO {padding-s : x}

General {padding} Superior {padding-top} Derecho {padding-right} Inferior {padding-bottom} Izquierdo {padding-left}
Para declarar la distancia del margen entre el área de contenido y su borde. Para verlo con más detalle consultar dimensionado.

Relleno general {padding : x}

CSS21 Para declarar de forma general el relleno en uno o más lados entre el área de contenido y los bordes. Se trata de una propiedad que resume {padding-top}, {padding-right}, {padding-bottom}, {padding-left}. El valor de x puede ser :
  • De 1 a 4 valores separados por espacios de
    • Medidas como px o porcentajes, calculado con respecto al ancho del bloque contenedor. Pero si el ancho del bloque contenedor se determina por el elemento que contiene, entonces el valor de porcentaje para este elemento contenido queda indefinido.
  • inherit (NO SE HEREDA)
El valor inicial no queda definido cuando se trata de propiedades resumidas como esta. Se aplica a todos los elementos excepto algunos de tablas (filas, columnas y grupos). Con 1 valor se aplica por igual a los cuatro lados. Con 2 valores el primero se aplica a los verticales y el segundo a los horizontales. Con 3 valores el primero se aplica al superior, el segundo al derecho e izquierdo y el tercero al inferior. Con 4 valores se aplican al superior, derecho, inferior e izquierdo (siguiendo el sentido de las agujas del reloj).

Ejemplo {padding}

En este ejemplo insertamos una imagen, la dotamos de un borde y un relleno en los 4 lados con un ancho de un 2% del ancho de la imagen.
<img src="ejemplos/css-propiedades/img_4.jpg" width="505px" height="101px" 
style="color:blue; border-style:solid; padding:2%;" />
Resultado:
img_4.jpg

Ejemplo {padding} aplicado a celdas de tabla

Tablas: Esta propiedad {padding} aplicadas a las celdas es equivalente a usar el atributo <table cellpadding = "x"> para todas las celdas de una tabla.
Tabla con relleno de 20px en celdas configurado con estilo en cada celda:<br />
<table  border="1">
    <tr><td style="padding:20px;">contenido</td>
    <td style="padding:20px;">contenido</td></tr>
    </table>
    Tabla con relleno de 20px en celdas configurado con la propiedad de la tabla:<br />
    <table cellpadding="20" border="1">
    <tr><td>contenido</td><td>contenido</td></tr>
</table>
Resultado:
Tabla con relleno de 20px en celdas configurado con estilo en cada celda:
contenidocontenido
Tabla con relleno de 20px en celdas configurado con la propiedad de la tabla:
contenidocontenido
En tablas puede consultar <table cellpadding>. Puede ver un ejemplo de configuración de tablas con y sin estilo en Border-spacing.html.

Relleno superior {padding-top : x}

CSS21 Para declarar el relleno superior. El valor de x puede ser :
  • Medidas como px o porcentajes, calculado con respecto al ancho del bloque contenedor. Pero si el ancho del bloque contenedor se determina por el elemento que contiene, entonces el valor de porcentaje para este elemento contenido queda indefinido. (VALOR INICIAL 0).
  • inherit (NO SE HEREDA)
El valor inicial no queda definido cuando se trata de propiedades resumidas como esta. Se aplica a todos los elementos excepto algunos de tablas (filas, columnas y grupos).

Ejemplo {padding-top}

En el ejemplo vemos un relleno superior.
<div style="color:green; border-style:solid; width:50%; 
padding-top:5%;">Muestra de  una división con un ancho del 
50% del padre y con un relleno superior del área de contenido 
hasta el borde de un 5%.</div>
Resultado:
Muestra de una división con un ancho del 50% del padre y con un relleno superior del área de contenido hasta el borde de un 5%.
Ver {padding}.

Relleno derecho {padding-right : x}

CSS21 Para declarar el relleno derecho. El valor de x puede ser :
  • Medidas como px o porcentajes, calculado con respecto al ancho del bloque contenedor. Pero si el ancho del bloque contenedor se determina por el elemento que contiene, entonces el valor de porcentaje para este elemento contenido queda indefinido. (VALOR INICIAL 0)
  • inherit (NO SE HEREDA)
El valor inicial no queda definido cuando se trata de propiedades resumidas como esta. Se aplica a todos los elementos excepto algunos de tablas (filas, columnas y grupos).

Ejemplo {padding-right}

En el ejemplo vemos un relleno derecho.
<div style="color:green; border-style:solid; width:50%; 
padding-right:5%;">Muestra de  una división con un ancho del 
50% del padre y con un relleno derecho del área de contenido 
hasta el borde de un 5%.</div>
Resultado:
Muestra de una división con un ancho del 50% del padre y con un relleno derecho del área de contenido hasta el borde de un 5%.
Ver {padding}

Relleno inferior {padding-bottom : x}

CSS21 Para declarar el relleno inferior. El valor de x puede ser :
  • Medidas como px o porcentajes, calculado con respecto al ancho del bloque contenedor. Pero si el ancho del bloque contenedor se determina por el elemento que contiene, entonces el valor de porcentaje para este elemento contenido queda indefinido. (VALOR INICIAL 0)
  • inherit (NO SE HEREDA)
El valor inicial no queda definido cuando se trata de propiedades resumidas como esta. Se aplica a todos los elementos excepto algunos de tablas (filas, columnas y grupos).

Ejemplo {padding-bottom}

En este ejemplo vemos un relleno inferior.
<div style="color:green; border-style:solid; width:50%; 
padding-top:5%;">Muestra de  una división con un ancho del 
50% del padre y con un relleno inferior del área de contenido 
hasta el borde de un 5%.</div>
Resultado:
Muestra de una división con un ancho del 50% del padre y con un relleno inferior del área de contenido hasta el borde de un 5%.
Ver {padding}.

Relleno izquierdo {padding-left : x}

CSS21 Para declarar el relleno izquierdo. El valor de x puede ser :
  • Medidas como px o porcentajes, calculado con respecto al ancho del bloque contenedor. Pero si el ancho del bloque contenedor se determina por el elemento que contiene, entonces el valor de porcentaje para este elemento contenido queda indefinido. (VALOR INICIAL 0)
  • inherit (NO SE HEREDA)
El valor inicial no queda definido cuando se trata de propiedades resumidas como esta. Se aplica a todos los elementos excepto algunos de tablas (filas, columnas y grupos).

Ejemplo {padding-left}

En el siguiente ejemplo vemos una división con un relleno izquierdo.
<div style="color:green; border-style:solid; width:50%; 
padding-left:5%;">Muestra de  una división con un ancho del 
50% del padre y con un relleno izquierdo del área de contenido 
hasta el borde de un 5%.</div>
Resultado:
Muestra de una división con un ancho del 50% del padre y con un relleno izquierdo del área de contenido hasta el borde de un 5%.
Ver {padding}