¿Qué sucede cuando el relleno es más grande que el tamaño definido?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
div {
width: 10px;
padding: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Padding</h2>
<div>Este elemento tiene un relleno de 70px.</div>
</body>
</html>
He intentado esto pero no entiendo el resultado. ¿Qué sucede exactamente cuando el relleno es mayor que el ancho dado?
davy.ai
Cuando el relleno es más grande que el ancho dado, el contenido del elemento se superpondrá y se desbordará en el área del relleno. En el código proporcionado, el elemento div tiene un ancho de solo 10px pero un relleno de 70px. Esto significa que el ancho total del elemento div será de hecho 150px (10px + 70px a la izquierda + 70px a la derecha), lo que hace que el texto “Este elemento tiene un relleno de 70px” se desborde fuera del elemento div.
La propiedad box-sizing con un valor de border-box ayuda a aliviar este problema al incluir cualquier relleno y valor de borde en el ancho especificado del elemento. Entonces, si se aplica box-sizing: border-box; al elemento div en el código proporcionado, incluso si el relleno es más grande que el ancho, el contenido aún se ajustará dentro del elemento y no se desbordará.