Tabla de contenidos
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