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
div
hijo, me ha costado ver el borde del otrodiv
por debajo