Lección 15: Box sizing
Podemos definir la anchura o altura total de un elemento contando o ignorando su borde o padding.
box-sizing
Cualquier borde o padding son sumados al ancho total del elemento. Es el estilo por defecto si no se define.
.elemento {
box-sizing: content-box;
}
Para arreglar este desajuste podemos usar border-box. Se resta las anchuras del borde o padding, respetando la anchura indicada.
.elemento {
box-sizing: border-box;
}
En el siguiente ejemplo podemos visualizar un elemento que sobrepasa las medidas deseadas de 10rem en anchura.
.elemento {
width: 10rem;
padding: 2rem;
border: 1rem solid black;
}
¿Cuanto mide de ancho? width 10rem + 4rem padding (tanto de derecha como izquierta tiene 2rem) + 2rem border (tanto de derecha como izquierta tiene 1rem). En total 16rem, o 256px.
En cambio si usamos box-sizing: border-box si se ajusta.
.elemento {
box-sizing: border-box;
width: 10rem;
padding: 2rem;
border: 1rem solid black;
}
Mide en total 10rem, o 160px. ¡Mídelo por ti mismo con el Inspector!
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me invitas a un café? ☕
Puedes hacerlo usando el terminal.
ssh customer@andros.dev -p 5555
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios