Saltar la navegación

4.3.4. Modelos de caja

Todos los elementos HTML se pueden considerar como cajas y cuando se habla de diseño en CSS, el modelo de caja es esencialmente una caja que envuelve cada elemento HTML.

El modelo de caja consiste en:

  • márgenes,
  • bordes,
  • relleno y
  • el contenido real.

La imagen a continuación ilustra el modelo de caja.

Modelo de cajasAhora vamos a ver los atributos que utilizaremos en el modelo de caja:

Elemento Descripción Ejemplo
margin-left Indica el tamaño del margen izquierdo. Puede usarse una longitud, en unidades CSS, o un porcentaje. 
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
margin-right Indica el tamaño del margen derecho. Puede usarse una longitud, en unidades CSS, o un porcentaje.
margin-top Indica el tamaño del margen superior. Puede usarse una longitud, en unidades CSS, o un porcentaje.
margin-bottom Indica el tamaño del margen inferior. Puede usarse una longitud, en unidades CSS, o un porcentaje.
margin Permite establecer los márgenes de una vez. Hay que seguir el orden: superior, derecho, inferior e izquierdo. 
p {
    margin: 25px 50px 75px 100px;
}
padding-left Indica el espacio izquierdo entre el borde y el contenido. Puede usarse una longitud, en unidades CSS, o un porcentaje. 
div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
padding -right Indica el espacio derecho entre el borde y el contenido. Puede usarse una longitud, en unidades CSS, o un porcentaje.
padding -top Indica el espacio superior entre el borde y el contenido. Puede usarse una longitud, en unidades CSS, o un porcentaje.
padding -bottom Indica el espacio inferior entre el borde y el contenido. Puede usarse una longitud, en unidades CSS, o un porcentaje.
padding Establece el espacio entre los bordes y el contenido de una sola vez. Hay que respetar el orden superior, derecho, inferior e izquierdo. 
div {
    padding: 25px 50px 75px 100px;
}
border-left-color Establece el color del borde izquierdo del elemento. Su valor es un color RGB o el nombre del color. 
p {
    border-style: solid;
    border-right-color: #ff0000;

}
border-right-color Establece el color del borde derecho del elemento. Su valor es un color RGB o el nombre del color.
border-top-color Establece el color del borde superior del elemento. Su valor es un color RGB o el nombre del color.
border-bottom-color Establece el color del borde inferior del elemento. Su valor es un color RGB o el nombre del color.
border-color Establece el color de los bordes del elemento de una sola vez. Hay que seguir el orden superior, derecho, inferior e izquierdo. Su valor es un color RGB o el nombre del color. 
p {
    border-style: solid;
    border-color: red green blue yellow;
}
border-style Establece el estilo del borde, los valores significan: none=ningún borde, dotted=punteado (no funciona siempre), solid=sólido, double=doble borde, los valores groove, ridge, inset y outset son bordes con varios efectos 3D. 
p {border-style: dotted;}
border-width Establece el tamaño de los bordes del elemento al que lo aplicamos. Hay que seguir el orden superior, derecho, inferior, izquierdo. 
p {
    border-style: solid;
    border-width: 5px;
}

h1 {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
width Establece el ancho del contenido del elemento. El valor es un porcentaje o un tamaño. 
div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}
height Establece la altura del contenido del elemento. El valor es un porcentaje o un tamaño.

min-width

max-width

 Establece el ancho mínimo/máximo del contenido del elemento. El valor es un porcentaje o un tamaño. 
div {
    min-height: 100px;
    max-width: 50%;
    background-color: darkpink;
}

min-height

max-height

 Establece la altura mínima/máxima del contenido del elemento. El valor es un porcentaje o un tamaño.
display Establece la manera en que se muestra el elemento. El valor puede ser block, inline o inline-block. Block, Inline, Inline-block

Creado con eXeLearning (Ventana nueva)