Estoy aprendiendo a usar css y me surgió el siguiente problema, creé un div padre con dos divs dentro y me genera una linea blanca entre el div padre y el hijo de la parte superior. No sé la razón de esta linea ya que probé quitando el padding, los margenes y demás y sigue apareciendo. El div padre es el que lleva el nombre de "Caja" (Se que no deberia llevar otro nombre) y el div hijo en el que se generan las lineas es "Caja-encabezado" las lineas se generan vertical y horizontalmente arriba y a la derecha del div hijo donde va el titulo "Cuadrado"
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
}
/*Encabezado*/
.Encabezado{
background-color: rgb(33, 157, 224);
text-align: center;
padding: 3px 0;
}
.Encabezado-titulo{
color: rgb(255, 255, 255);
padding: 10px 0;
text-transform: uppercase;
}
.Encabezado-descripcion{
color: #fff;
padding: 10px 0;
}
/*Respuestas*/
.respuesta{
text-align: center;
padding: 5px 0;
}
.respuesta p{
font-size: 20px;
font-weight: bold;
}
/*Contenedor*/
.Contenedor{
width: 90%;
padding: 10px;
overflow: hidden;
margin: auto;
max-width: 1000px;
}
/*CAJAS*/
.caja{
width: 40%;
height: 650px;
border: 3px solid coral;
border-radius: 17px;
margin: 15px;
float: left;
overflow: hidden;
position: relative;
}
/* Encabezado de la caja*/
.caja-encabezado{
background-color: coral ;
text-align: center;
padding: 15px 0;
color: #fff;
margin: 0px;
width: 100%;
}
.caja-principal{
text-align: center;
padding: 10px;
}
.caja-principal__texto{
font-size: 20px;
font-weight: bolder;
}
.caja-principal__input{
height: 40px;
width: 200px;
font-size: 18px;
font-weight: bolder;
display: inline-block;
margin: 10px 10px;
padding: 10px;
color:coral ;
border: solid coral;
border-radius: 5px;
}
.caja-encabezado__btn{
background-color: rgb(255, 127, 80);
color: white;
width: 120px;
font-size: 18px;
padding: 10px;
text-align: center;
margin: 5px;
border-style: none;
border-radius: 5px;
}
.caja-encabezado__btn:hover{
background-color: rgb(255, 46, 46);
cursor: pointer;
}
.caja-encabezado__btn:active{
background-color: rgb(254, 189, 103);
}
/*Para responsive*/
@media screen and (max-width:){
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Figuras geometricas</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--Encabezado-->
<header class="Encabezado">
<h1 class="Encabezado-titulo">Figuras geometricas</h1>
<p class="Encabezado-descripcion">
Calcular las diferentes medidas de figuras geometricas, como el area y
el perimetro
</p>
</header>
<!-- Respuesta-->
<div class="respuesta">
<p>El area de cuadrado es: 4cm</p>
</div>
<section class="Contenedor">
<div class="caja">
<div class="caja-encabezado">
<h2>cuadrado</h2>
</div>
<div class="caja-principal">
<p class="caja-principal__texto">¿Cuanto mide cada lado del cuadrado</p>
<input class="caja-principal__input" type="number" name="lado" id="lado">
<button class="caja-encabezado__btn" type="boton">perimetro</button>
<button class="caja-encabezado__btn" type="boton">Area</button>
</div>
</div>
<div class="caja">
<div class="caja-encabezado">
<h2>cuadrado</h2>
</div>
<div class="caja-principal">
<p class="caja-principal__texto">¿Cuanto mide cada lado del cuadrado</p>
<input class="caja-principal__input" type="number" name="lado" id="lado">
<button class="caja-encabezado__btn" type="boton">perimetro</button>
<button class="caja-encabezado__btn" type="boton">Area</button>
</div>
</div>
<div class="caja">
<div class="caja-encabezado">
<h2>cuadrado</h2>
</div>
<div class="caja-principal">
<p class="caja-principal__texto">¿Cuanto mide cada lado del cuadrado</p>
<input class="caja-principal__input" type="number" name="lado" id="lado">
<button class="caja-encabezado__btn" type="boton">perimetro</button>
<button class="caja-encabezado__btn" type="boton">Area</button>
</div>
</div>
</section>
</body>
</html>