Saltar a contenido

Estilos para cajas

Estilos para cajas

(<div> o <table>)

  • width: Unidades CSS | Porcentaje
    height: Unidades CSS | Porcentaje
    Ejemplos: width: 50px; width: 100%; height: 15px;
    Permiten indicar el ancho y altura de un elemento. Se pueden aplicar sobre muchos elementos, como tablas, etiquetas div, imágenes, párrafos "p", etc. Con algunas etiquetas no funciona, tampoco sirve para indicar espaciado (padding), bordes o márgenes.

  • margin-left: Unidades CSS
    Ejemplos: margin-left: 1cm; margin-left: 0,5in;
    Indica el tamaño del margen izquierdo.

  • margin-right: Unidades CSS
    Ejemplos: margin-right: 5%; margin-right: 1in;
    Define el tamaño del margen derecho.

  • margin-top: Unidades CSS
    Ejemplos: margin-top: 0px; margin-top: 10px;
    Indica el tamaño del margen superior.

  • margin-bottom: Unidades CSS
    Ejemplos: margin-bottom: 0pt; margin-top: 1px;
    Indica el tamaño del margen inferior.

  • margin: <arriba> <derecha> <abajo> <izquierda> | <arriba> <derecha> <abajo> | <arriba-abajo> <izquierda-derecha> | <los 4 márgenes>
    Ejemplos: margin: 4px 2px 1px 2px; margin: 4px;
    También podemos utilizar el estilo "margin" para indicar todos los márgenes a la vez, esta etiqueta nos permite indicarle desde 4 valores (para cada uno de los márgenes), hasta 1 valor (para aplicarlo sobre todos los márgenes).

  • padding-left: Unidades CSS
    Ejemplos: padding-left: 0.5in; padding-left: 1px;
    Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas. El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.

  • padding-right: Unidades CSS
    Ejemplos: padding-right: 0.5cm; padding-right: 1pt;
    Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas. El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.

  • padding-top: Unidades CSS
    Ejemplos: padding-top: 10pt; padding-top: 5px;
    Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este.

  • padding-bottom: Unidades CSS
    Ejemplos: padding-bottom: 0.5cm; padding-bottom: 1pt;
    Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y el contenido de este.

  • padding: <arriba> <derecha> <abajo> <izquierda> | <arriba> <derecha> <abajo> | <arriba-abajo> <izquierda-derecha> | <los 4 márgenes>
    Ejemplos: padding: 4px 2px 1px 2px; padding: 4px;
    Al igual que para "margin", esta etiqueta nos permite indicarle desde 4 valores (espaciado hasta cada uno de los bordes por separado), hasta 1 valor (para indicar el mismo espaciado hasta todos los bordes).

  • border-color: color RGB o nombre de color
    Ejemplos: border-color: red; border-color: #ffccff;
    Para indicar el color del borde del elemento de la página al que se lo aplicamos. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color.

  • border-style: none | dotted | solid | double | groove | ridge | inset | outset
    Ejemplos: border-style: solid; border-style: double;
    El estilo del borde, los valores significan: none=ningún borde, dotted=punteado, solid=solido, double=doble borde, desde groove hasta outset son bordes con varios efectos 3D.

  • border-width: Unidades CSS
    Ejemplos: border-width: 10px; border-width: 0.5in;
    El tamaño del borde del elemento al que lo aplicamos.

  • border: <grosor> <tipo> <color>
    Ejemplo: border: 2px solid red;
    De esta forma podemos indicar las tres propiedades del borde a la vez. También podemos utilizar border-top, border-right, border-bottom y border-left para indicar estas tres propiedades para un borde en concreto.

  • float: none | left | right
    Ejemplo: float: right;
    Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento.

  • clear: none | both | right | left
    Ejemplo: clear: right;
    Indica que no se permiten elementos por ese lado del objeto. Por ejemplo, si tenemos varias cajas una a continuación de otra, al poner "clear:left" en la última caja, esta pasaría a la siguiente línea.

En la siguiente imagen se puede ver un esquema de un contenedor DIV en el que se representa la diferencia entre margin, padding y border: