6

Tengo el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Modelo Cajas</title>
    <style type="text/css">
    #contenedor{
        width: 400px;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
        border:solid 2px;

    }
    #interno{
        height: 100%;
        padding: 20px;
        border: dashed 10px red;
    }
    
    </style>
</head>
<body>
    <div id="contenedor">
        <div id="interno"></div>
    </div>
</body>
</html>

No entiendo por qué el div "interno" sobrepasa en altura al div "contenedor". Sospecho que puede ser por la propiedad height pero no entiendo el por qué se produce este efecto. Gracias

2
  • Se entendería mejor si en el ejemplo le quitas el fondo azul al div hijo, me ha costado ver el borde del otro div por debajo
    – user7176
    el 14 mar. 2019 a las 11:24
  • 1
    He quitado el color de fondo. Gracias
    – Euriloco
    el 14 mar. 2019 a las 11:44

2 respuestas 2

9

Tiene que ver con la propiedad box-sizing. Por defecto, esta definida en content-box, lo que significa, que si asignas width y height, esto se asignara al contenido sin tener en cuenta paddings y borders. Lo que quiere decir que la altura de tu "caja" sera

100% + padding + border = altura total

.

Si quieres que esto no ocurra, asigna border-box a la propiedad box-sizing: border-box;. Esto hará que la altura y width que definas, incluya el borde y padding. Así que sera de la siguiente manera;

contenido + padding + border = 100% = altura total

#interno{
    height: 100%;
    background-color: blue;
    padding: 20px;
    border: dashed 10px red;
    box-sizing: border-box;
}
6

introducir la descripción de la imagen aquí

La propiedad box-sizing puede contener 3 valores: content box, padding box, border box.

El valor por defecto es content box. Esto es muy importante ya que altera la forma en que calculas tanto el ancho como el alto de tus cajas.


La regla es simple. Si usas content box el ancho de tus cajas sera: margen izquierdo + borde izquierdo + padding izquierdo + ancho + padding derecho + borde derecho + margen derecho. La misma regla aplicaria para el alto.


Si usas padding box, no tienes que recalcular el ancho de tus cajas si usas padding, mas sin embargo si lo debes hacer cuando usas bordes y margenes.


Por ultimo en border box solo tendriamos que estar al tanto de los margenes. En la actualidad se utiliza como buena practica border-box, ya que te evita recalcular el tamaño de tus cajas si añades las propiedades antes mencionadas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.