0

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>

introducir la descripción de la imagen aquí

3
  • Que tienes en el HTML bro ?, dejanos ver
    – Mateo Guio
    el 6 abr. 2022 a las 17:04
  • No especificas cuales son los padres y los hijos, no muestras el HTML, no muestras cuales son las líneas blancas.. si son verticales.. horizontales o ambas.. una pregunta poco especifica
    – David081
    el 6 abr. 2022 a las 17:53
  • @MateoGuio Ya lo modifiqué, agregué el html y el css completo, las lineas que aparecen son las que están arriba y a la derecha del titulo "Cuadrado" este esta en el div hijo "Caja-encabezado" que está en el div "Caja" Disculpen las molestias. el 7 abr. 2022 a las 1:39

1 respuesta 1

1

Hay una propiedad en CSS llamado outline. Que tal si prueba ésta propiedad en vez de border.

... es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento (documentación).

Nota: ¡ El contorno difiere de los bordes ! A diferencia del borde, el contorno se dibuja fuera del borde del elemento y puede superponerse a otro contenido. Además, el contorno NO forma parte de las dimensiones del elemento; el ancho y la altura totales del elemento no se ven afectados por el ancho del contorno (w3schools.com).

*{ 
 margin: 0;
 padding: 0;
 box-sizing: border-box; 
}

body{ 
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
 font-size: 20px;
} 

.Contenedor{ 
 width: 90%; 
 padding: 10px; 
 overflow: hidden; 
 margin: auto;
 max-width: 1000px; 
} 

.caja { 
 width: 40%; 
 height: 650px;
 outline: 3px solid coral; 
 border-radius: 17px; 
 margin: 15px; 
 padding: 0;
 float: left; 
 overflow: hidden; 
 position: relative; 
}

.caja-encabezado{ 
 background-color: coral; 
 text-align: center; 
 padding: 15px 0; 
 color: #fff; 
 margin: 0; 
 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); 
}
<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> 
 
  </section>

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.