HTMLpointHTMLpoint HTMLpoint.com


 Atributos márgenes y alineación



Las hojas de estilo permiten justificar el texto sin usar tablas o similares. Las CSS crean elementos que aparecen dentro de un box. Cada box posee propiedades que podemos dividir en tres categorías:

  • las propiedades de los márgenes, que asignan un borde externo al box;

  • las propiedades de relleno, que asignan un espacio interno dentro del box para separar el contenido de los márgenes;

  • las propiedades de los bordes, que definen las líneas gráficas alrededor del box.

    Los valores de estos atributos se expresan en pulgadas (in), centímetros (cm), píxel (px), puntos (pt) y unidades (em).
    Simplificando el concepto, las hojas de estilo están impostadas como si fueran ventanas independientes dentro de la página. Tienen, pues, sus propias dimensiones y valores de impostación. Entre éstos, además del de texto visto antes y el de fondo que veremos más adelante, figuran los valores correspondientes a los bordes de esta especie de ventanas.
    Existen varios atributos para los bordes y la alineación. Éstos son:

    Atributos margin-left, margin-right, margin-top, margin-bottom
    Se trata de cuatro atributos que impostan la distancia entre el box que contiene las CSS y elementos adyacentes y los cuatro márgenes:

    <STYLE>
    BODY { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px }
    </STYLE>


    Atributo margin
    Los cuatro valores antes vistos se pueden definir con el atributo margin. Cuando se imposta este valor, el navegador asume como orden el primer margen superior (margin-top), el derecho (margin-right), el inferior (margin-bottom) y el izquierdo (margin-left). Si se proporcionan sólo dos o tres, los que faltan se asignan automáticamente según el valor del lado impostado regularmente:

    <STYLE>
    BODY { margin: 10px 10px 10px 10px }
    </STYLE>


    En este primer ejemplo, todos los elementos están a la misma distancia de los elementos cercanos y cada uno de ellos está correctamente indicado.

    <STYLE>
    BODY { margin: 10px 10px }
    </STYLE>


    En este segundo ejemplo, están impostados sólo dos valores (margin-top e margin-right). Los márgenes que faltan, el izquierdo y el inferior, se deducen del valor del margen derecho y del superior, respecticamente.

    Atributos padding-top, padding-bottom, padding-right, padding-left
    Dichos atributos indican la distancia entre los lados del box y los elementos que están en su interior. Dicho de otro modo, tienen una función opuesta a la vista anteriormente para el atributo margin. Es posible usar las medidas estándar (pulgadas, centímetros, puntos, píxel, etc.) o valores porcentuales:

    <STYLE>
    BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in }
    </STYLE>


    Atributo padding
    Como por lo que se refiere al atributo margin, también aquí los cuatro valores vistos en precedencia pueden definirse con un solo atributo: en este caso, padding. Cuando se imposta este valor, el navegador asume como orden el el primer valor de relleno superior (padding-top), el derecho (padding-right), el inferior (padding-bottom) y el izquierdo (padding-left). Si se proporcionan sólo dos o tres, los que faltan se asignan automáticamente según el valor del lado impostado:

    <STYLE>
    BODY { padding: 10pt 10px 110% 2in }
    </STYLE>


    En este primer ejemplo, todos los elementos están a la misma distancia de los elementos cercanos y cada uno de ellos está correctamente indicado.

    <STYLE>
    BODY { padding: 10pt 10px }
    </STYLE>


    Atributos border-top, border-bottom, border-right, border-left
    Estos atributos definen el estilo y el color de cada elemento y se impostan con algunas palabras clave: none, dotted, dashed, solid, double, groove, ridge, inset y outset:

    <STYLE>
    BODY { border-top: dotten green; border-left: dashed black; border-right: solid blue; border-bottom: groove yellow }
    </STYLE>


    Atributos border-top-width, border-bottom-width, border-right-width, border-left-width
    La función de estos atributos es generar un efecto similar a los bordes de las tablas HTML. Es posible establecer medidas porcentuales o de referencia (em), además de otras palabras clave como thin, medium y thick:

    <STYLE>
    BODY { border-top-width: 5px; border-left-width: 4pt; border-right-width: thick; border-bottom-width: 2em }
    </STYLE>


    Atributo border-width
    Como por lo que respecta a los atributos margin y padding, también aquí los cuatro valores vistos en precedencia pueden definirse con un solo atributo: en este caso, border-width:

    <STYLE>
    BODY { border-width: 10pt 10px 1em 2in }
    </STYLE>


    Atributo border-color
    Define los colores de los cuatro bordes de la CSS en su conjunto, es decir, sin posibilidad de establecer colores diversos para cada una de ellas:

    <STYLE>
    BODY { border-color: green }
    </STYLE>


    Atributo border-style
    Este atributo define el estilo de los cuatro bordes de la CSS en su conjunto, es decir, sin posibilidad de establecer colores diversos para cada una de ellas. Los valores se especifican mediante algunas palabras clave: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Los últimos cuatro valores son tridimensionales, siempre que el navegador los soporte:

    <STYLE>
    BODY { border-style: groove }
    </STYLE>


    Atributo border
    Se trata de una especie de atributo omnicomprensivo de los últimos vistos en esta página. Recoge todas las variantes correspondientes a los bordes, los estilos, el color y la anchura. Asigna los mismos valores a todos los lados, anulando el efecto de otros atributos similares insertados precedentemente:

    <STYLE>
    BODY { border: 12px groove green }
    </STYLE>


    Atributo width
    Si riferisce alla larghezza per orizzontale del box. Puo' essere espresso nelle unita' di misura finora analizzate. Il valore "auto" permette al box di adattarsi al contenuto degli elementi:

    <STYLE>
    BODY { width: 300px }
    </STYLE>


    Atributo float
    Questo attributo ha una funzione simile ad ALIGN in HTML classico. I valori a disposizione sono left, right e none:

    <STYLE>
    BODY { float: right }
    </STYLE>


    Atributo clear
    Si se especifican los valores right o left, los elementos se disponen con float por el lado especificado. Usando none se impostan en ambos lados:

    <STYLE>
    BODY { clear: left right }
    </STYLE>


  •   Vuelve a principio de página