0

Aquí está mi código html:

<!DOCTYPE html>
<html lang="en">
<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>Diseño Responsive con CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class = "barra-lateral-container">
        <h6>Inicio</h6>
        <h6>Mis redes</h6>
        <h6>Más información</h6>
    </div>

    <div class = "container-principal">
        <h1>Hola</h1>
    </div>
</body>
</html>

Y aquí está mi código css:

.barra-lateral-container{
    color: white;
    height: 100%;
    width: 150px;
    position: fixed;
    padding-top: 60px;
    background-color: #d81e5b;
    font-size: 170%;
}

.barra-lateral-container h6{
    margin: 5%;
    padding: 15%;
    display: block;
}

.container-principal{
    background-color: black;
    margin-left: 150px;
    color:white;
}

Cuando visualizo lo que estoy haciendo, me encuentro con lo siguiente: introducir la descripción de la imagen aquí

¿Qué tendría que hacer para quitar el espacio blanco que está a la izquierda del bloque rojo y el espacio blanco que está arriba del bloque rojo y negro?

1
  • todos esos margin no molestan?
    – gbianchi
    Commented el 8 dic. 2022 a las 23:45

1 respuesta 1

0

Para evitar eso SIEMPRE has de incluir al comienzo de tus css las siguientes lineas:

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

Esto te ahorrar muchos quebraderos de cabeza. Aparte, me he tomado la libertad de arreglar algunos errores que tenias por ahi en el css. Asi queda el codigo: HTML

<body>
    <div class="barra-lateral-container">
        <p>Inicio</p>
        <p>Mis redes</p>
        <p>Más información</p>
    </div>

    <div class="container-principal">
        <h1>Hola</h1>
    </div>
</body>

CSS

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

.barra-lateral-container {
    color: white;
    height: 100vh;
    width: 150px;
    padding-top: 6rem;
    position: absolute;
    background-color: #d81e5b;
}

.barra-lateral-container>p {
    font-size: 16px;
    text-align: center;
}

.container-principal {
    position: relative;
    background-color: black;
    margin-left: 150px;
    color: white;
}

Te recuerdo que no deberias usar la etiqueta h6 practicamente nunca ya que para eso esta la etiqueta p, tambien comentarte que no es buena idea hacer las medidas de la pagina sumando y restando margin y padding, te he intentado arreglar alguno. Un saludo, espero haberte ayudado

2
  • 1
    Parece que le estés diciendo que no use h6 nunca y en su lugar usar la etiqueta p. Más bien habría que aclararle que son y para que sirven realmente estos encabezados. Le has recomendado que en su lugar use la etiqueta p, y sería más acertado que use enlaces o aun mejor una lista desordenada en su lugar ul con sus elementos li correspondientes
    – David
    Commented el 9 dic. 2022 a las 12:25
  • Buenas, siento si se mal entendio el mensaje. Claro que los h6 son utiles, pero en ese caso desde luego que es mejor la etiqueta p Commented el 9 dic. 2022 a las 22:34

Tu Respuesta

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

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