Ejemplo de aplicación estilos para controlas las dimensiones de un elemento

Es importante conocer cómo se aplican las dimensiones a los elementos con CSS. Todo ocupa su espacio, incluso el borde.

Dimensiones width y height

            .mitad{
                width: 50%;
                height: 100px;
                background-color: rgba(255,0,0,0.2);
            }
            
            .heredero{
                width: inherit;
                height: 80%;
                background-color: rgba(255,0,0,0.2);
            }   
            

Un div de tamaño mitad y otro que hereda y es de nuevo la mitad y aun 805 de la altura

Dimensiones con límites

            .limites{
                width: 50%;
                max-width:400px;
                min-width: 100px;
                height: 100px;
                background-color: rgba(255,0,0,0.2);
            }
            

Juegue con la anchura de la página para ver que el div nunca pasa de unas determinadas medidas mínimas y máximas a pesar de que se adapte al 50%

Relleno

            .sinrelleno{

                width: 400px;
                height: 100px;
                background-color: rgba(255,0,0,0.2);
            }
            .relleno{
                padding-right: 100px;
                width: 400px;
                height: 100px;
                background-color: rgba(255,0,0,0.2);
            }
            .relleno-box{
                padding-right: 100px;
                width: 400px;
                height: 100px;
                background-color: rgba(255,0,0,0.2);
                box-sizing: border-box;
            }
            .heredero2{
                width: 50%;
                height: 50px;
                background-color: rgba(255,0,0,0.2);
            }   
            

Sin relleno

Se ha añadido relleno en todas las direcciones menos en la izquierda. La representación aparece más ancha, pero el div que hereda (50%) es evidente que no ocupa el 50% porque calcula la anchura sin tener en cuenta el relleno no varía el valor de la anchura.

Se ha añadido la porpiedad box-sizing: border-box; y ahora el tamaño se fija (incluyendo padding) en el definido en width.