Modelo de cajas: márgenes, relleno y bordes


Padding o relleno

El padding es el margen interno de un elemento, también se le llama relleno y es la cantidad de espacio entre el borde y el contenido del elemento.

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}


Margin

El margin es el margen externo de un elemento, fuera de cualquier borde definido.

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}


Bordes

La propiedad border en CSS permite especificar el estilo, el ancho y el color de los bordes de un elemento. Puedes usar diferentes valores para crear distintos tipos de bordes, como líneas lisas, de puntos, redondeados, etc.

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}

Pagina elaborada por:

Abril Yamilet Cisneos Amador

Para:

CECyTEM