1

introducir la descripción de la imagen aquí

Hola gente tengo una pregunta de que es lo que esta generando estas lineas entre cada seccion. Estoy revisando y por eso le puse un color a cada uno y al body le puso el color gris. Ya llevo un rato tratando de encontrar la solución peor no logro darla. No se si es problema del HTML o del CSS, intente asignarle el tamaña a cada seccion pero no hay resultado, siempre termino igual.

Si alguien tiene una sospecha por favor me avisa.

el problema es que esto me pide que ponga mas caracteres y la verdad ya no tengo nada mas para poner

body{
    margin: 0;
    padding: 0;
    font-size: 14px;
    background-color:grey;
    position: inline-block;;  
}
html{
    background-color:white;
    padding: 0;
}
header{
    padding: 0;
    padding-bottom: 0;
}
.list{
    display: flex;
    color: white;
    background-color: cornflowerblue;
    margin: 0;
    padding: 0;
    padding-bottom: 0;
    justify-content: space-around;  
}
.projects{
    background-color: bisque;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: bold;
    font-size:25px;

}
.about{
    background-color: green;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: bold;
    font-size:25px;
}
.tech{
    background-color: yellow;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: bold;
    font-size:25px;
}
<body>
    <header>
        <div class="menu_bar" onclick="showMenu()">
            <a href="#" class="bt-menu"><span><i class="fas fa-list"></i></span>Menu</a>
        </div>
        <nav class="list">
            <ul class="menu" id="menu" >
                <li class="menu_link">
                   <a href=""><span><i class="fas fa-home"></i></span> Home</a>
                </li>
                <li class="menu_link">
                   <a href=""><span><i class="fas fa-briefcase"></i></span> Work</a>
                </li>
                <li class="menu_link">
                   <a href=""><span><i class="fas fa-desktop"></i></span> Technologies</a>
                </li>
                <li class="contact_link">
                    <a href="https://www.linkedin.com/in/gonzalo-valentin-a-883480116/"><i class="fab fa-linkedin fa-2x"></i></a> 
                    <a href="https://github.com/valennast"><i class="fab fa-github-square fa-2x"></i></a>
                </li>
            </ul>
        </nav>
    </header>
    <section class="projects flex-item">
        <h1>Projects</h1>
        <h2>E-commerce with JavaScript</h2>
        <div class="project_eccomerce">
            <img style="width:50%; height:50%;padding: 20px;" src="img/Screenshot_2020-12-05 E-commerce, Mex-foods (1).jpg" alt="" id="e-commerce">
        </div>
    </section>
    <section class="about flex-item">
        <h1>About Me</h1>
    </section>  
    <section class="tech flex-item">
        <h1>Technologies</h1>
        <i class="fab fa-html5"></i>
        <i class="fab fa-css3-alt"></i>
        <i class="fab fa-java"></i>
    </section>  
</body>

Ese es mi probelwma asi que bueno, en los comentarios dicenq ue debo poner el contacto y esto me jodo

2 respuestas 2

1

Los navegadores traen propiedades css estandar para cada etiqueta html, llámese padding, margin, font-size, etc, y los aplica a cada elemento, un ejemplo "margin-top: 20px", para eso se usa lo que se llama reset css, un ejemplo es lo que coloca @Jose-Luis-Prz-Montaño

* {
  margin: 0;
  padding: 0;
}

De esta forma ya no precisas colocarlo en los elementos a menos que quieras aplicar uno determinado.

Con esto tu css se reduciría a:

*{
  padding: 0;
  margin: 0;
}
body{
    font-size: 14px;
    background-color:grey;
    position: inline-block;  
}

.list{
    display: flex;
    color: white;
    background-color: cornflowerblue;
    justify-content: space-around;  
}
.projects{
    background-color: bisque;
    font-weight: bold;
    font-size:25px;

}
.about{
    background-color: green;
    font-weight: bold;
    font-size:25px;
}
.tech{
    background-color: yellow;
    font-weight: bold;
    font-size:25px;
}

Puedes buscar verios resets en google, o usar un css framework que haga el trabajo por tí.

En este enlace puedes informarte más sobre css reset.

1
0

El padding: 0 y el margin: 0 debes ponerlo de manera global y eso se selecciona con un asterisco(*) tal como lo pongo

*{
  padding: 0;
  margin: 0;
}
body{
    font-size: 14px;
    background-color:grey;
    position: inline-block;  
}

header{
    padding: 0;
    padding-bottom: 0;
  
}
.list{
    display: flex;
    color: white;
    background-color: cornflowerblue;
    margin: 0;
    padding: 0;
    padding-bottom: 0;
    justify-content: space-around;  
}
.projects{
    background-color: bisque;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: bold;
    font-size:25px;

}
.about{
    background-color: green;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: bold;
    font-size:25px;
}
.tech{
    background-color: yellow;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-weight: bold;
    font-size:25px;
}
<body>
    <header>
        <div class="menu_bar" onclick="showMenu()">
            <a href="#" class="bt-menu"><span><i class="fas fa-list"></i></span>Menu</a>
        </div>
        <nav class="list">
            <ul class="menu" id="menu" >
                <li class="menu_link">
                   <a href=""><span><i class="fas fa-home"></i></span> Home</a>
                </li>
                <li class="menu_link">
                   <a href=""><span><i class="fas fa-briefcase"></i></span> Work</a>
                </li>
                <li class="menu_link">
                   <a href=""><span><i class="fas fa-desktop"></i></span> Technologies</a>
                </li>
                <li class="contact_link">
                    <a href="https://www.linkedin.com/in/gonzalo-valentin-a-883480116/"><i class="fab fa-linkedin fa-2x"></i></a> 
                    <a href="https://github.com/valennast"><i class="fab fa-github-square fa-2x"></i></a>
                </li>
            </ul>
        </nav>
    </header>
    <section class="projects flex-item">
        <h1>Projects</h1>
        <h2>E-commerce with JavaScript</h2>
        <div class="project_eccomerce">
            <img style="width:50%; height:50%;padding: 20px;" src="img/Screenshot_2020-12-05 E-commerce, Mex-foods (1).jpg" alt="" id="e-commerce">
        </div>
    </section>
    <section class="about flex-item">
        <h1>About Me</h1>
    </section>  
    <section class="tech flex-item">
        <h1>Technologies</h1>
        <i class="fab fa-html5"></i>
        <i class="fab fa-css3-alt"></i>
        <i class="fab fa-java"></i>
    </section>  
</body>

una recomendacion es que no pongas estilos en el html (como en tu img) ya que van a tener mas prioridad que los estilos del documento css y puede generarte problemas ademas de que es una mala practica

4
  • Gracias funciono genial, lo voy a tomar todo en cuenta, otra consulta es necesario incluir siempre ese asterisco?.... gracias por el consejo lo voy a tomar en cuenta. el 7 dic. 2020 a las 19:43
  • para evitar ese tipo de problemas de los márgenes y padding si, aunque otra mejor manera seria utilizando Normalize.css que es un proyecto que hace prácticamente lo mismo agregando otras mejoras pd: si te ha servido mi respuesta te agradecería lo puntuaras como correcta para así ayudar a que mas personas puedan encontrarla el 8 dic. 2020 a las 5:19
  • Jose Luis muchas gracias por la información, nada me hubiera gustado mas que puntuarte para arriba y darte todos los puntos, pero como es mi primer pregunta y tengo menos de 15 puntos acumulados no tengo permitido puntuar.Saludos el 8 dic. 2020 a las 7:40
  • Jose Luis tome tu otro consejo y trate de utilizar Normalize.css pero sigue entrando en conflico con el inline y me genera el mismo hueco. el 8 dic. 2020 a las 8:06

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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