es Css la Cajas o Box esta devididas en tres capaz:
- contenido
- padding
- border
CONTENIDO en el contenido podemos agregar diferentes propiedades.
width: define el ancho del elemento. max-width: define el ancho maximo del elemento (no puede sobrepasar este ancho) min-width: define un ancho minimo del elemento (no puede medir menos de este ancho).
height: define el alto del elemento. max-height: define el alto maximo del elemento (no puede sobrepasar este alto). min-height: define el alto minimo de un elemento (no puede medir menos de este alto)
overflow;hidden; esconde lo que se desborda
shorthand: permiten establecer los valores de varias otras propiedades CSS simultáneamente.
PADDING padding: relleno que separa el contenido del border
padding-top: relleno en la parte superior padding-right: relleno a la derecha padding-bottom: relleno en la parte inferior padding-left: rellno en la parte izquierda (este relleno se genera dentro de la caja)
se puede abreviar las cuatro propiedades juntas usando solo padding padding: top right bottom left
Usando 3 valores, el primer valor se aplica arriba, el segundo se aplica a la izquierda y derecha y el terceto se aplica abajo padding: top-bottom right-left
Usando 1 valor se aplica a tos los lados de igual manera BORDER
border-color: cambio de color (colocar los nombres de los colores en ingles)
borde-width: define el ancho del border(podemos colocar el grosor del borde en medidas ej: px)(si usas visual studio code apresiona control + espacio para ver la diferentes unidades)
border-style: define el estilo del border (Solid, Dotted, Dashed, Double, Ridge. estos son algunos, practica y prueba a gusto)
usar esta pagina para mas detalles https://developer.mozilla.org/es/docs/Web/CSS/border-style