Cualquier elemento incluido en un documento HTML dispone de una estructura tipo caja que se puede modificar usando las propiedades CSS. Las propiedades más importantes de las cajas o contenedores son las siguientes: margin, border y padding.
Las propiedades operan en el siguiente orden: superior, derecha, inferior e izquierda.
Propiedad | Descripción | Valores |
---|---|---|
padding-top padding-right padding-bottom padding-left |
Tamaño del relleno superior, derecho, inferior e izquierdo | longitud | porcentaje |
padding |
Tamaño del relleno | longitud | porcentaje {1,4} |
Valores del padding (también aplicables a la propiedad margin):
Padding
div.a { padding-top: 30px; padding-bottom: 80px; padding-right: 50px; padding-left: 40px; border: 1px solid black; background-color: azure; } div.b { /Propiedad corta/ padding: 30px 50px 80px 40px; border: 1px solid black; background-color: darkseagreen; }
0
Propiedad | Descripción | Valores |
---|---|---|
margin-top margin-right margin-bottom margin-left |
Tamaño del margen superior, derecho, inferior e izquierdo | longitud | porcentaje | auto |
margin |
Ancho de los márgenes | longitud | porcentaje | auto {1,4} |
margin
div.a { margin-top: 30px; margin-bottom: 80px; margin-right: 50px; margin-left: 40px; border: 1px solid black; background-color: azure; } div.b { /* Propiedad corta */ margin: 30px 80px 50px 40px; border: 1px solid black; background-color: darkseagreen; }
0
Propiedad | Descripción | Valores |
---|---|---|
border-top-width
border-right-width
border-bottom-width
border-left-width |
Anchura del borde superior, derecho, inferior o izquierdo | thin | medium | thick | longitud |
border-width |
Anchura del borde (reducida) | thin | medium | thick | longitud {1,4} |
border-top-color
border-right-color
border-bottom-color
border-left-color |
Color del borde superior, derecho, inferior e izquierdo | color | transparent |
border-color |
Color del borde (reducida) | color | transparent {1,4} |
border-top-style
border-right-style
border-bottom-style
border-left-style |
Estilo del borde superior, derecho, inferior e izquierdo | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |
border-style |
Estilo del borde (reducida) | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4} |
border-top
border-right
border-bottom
border-left |
Ancho, estilo y color para el borde superior, derecho, inferior e izquierdo | border-top-width | border-top-style | border-top-color |
border |
Ancho, estilo y color para los bordes (reducida) | border-width | border-style | border-color |
border-radius |
Curvatura del borde | longitud | porcentaje {1,4} |
**Las propiedades del borde no tendrán efecto hasta que se defina la propiedad border-style.
border
.a { border: 4px solid blue; } .b { border: 6px dotted green; } .c { border: 3px dashed purple; } .d { border-top: 3px double orange; border-right: 3px double brown; border-bottom: 3px double brown; border-left: 3px double brown; }
0
border-radius
.a { background-color: blue; border-radius: 20px 20px 0 0; height:100px; width: 100px;} .b { background-color: green; border-radius: 0 0 40px 40px; height:100px; width: 100px;} .c { background-color: purple; border-radius: 50px; height:100px; width: 100px;}
dark