Lección 11: 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;
}
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

¿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;
}
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Mide en total 10rem, o 160px. ¡Mídelo por ti mismo con el Inspector!

Más información

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario