Estoy tratando de hacer una imagen debajo de un título en la parte superior izquierda, pero la imagen no quiere cubrir el lado izquierdo.

Cambié la posición a posición: absoluto, hice el margen y el relleno 0, inspeccioné la página HTML y no puedo ver nada que pueda influir en esta imagen.

El HTML:

        <div class="header">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h1>Dillan Robbertze<h1>
                        <img src="mountain-og.jpeg">
                    </div>

                </div>
            </div>
        </div>

El CSS:

.header img{
    height:Auto;
    left:0;
    margin:0;
    padding:0;
    position:absolute;
    width:100vw;
    z-index:1;
    }

Resultados esperados: la imagen está debajo del título, arriba a la izquierda. Resultados reales: hay un espacio en blanco a la izquierda y arriba de la imagen.

EDITAR: agregué arriba: 0; Gracias a @Somesh Mukherjee. La imagen se movió hacia arriba, pero aún queda un espacio izquierdo que no debería estar allí.

0
user11482259 10 may. 2019 a las 19:39

3 respuestas

La mejor respuesta

Agregue una clase al elemento div padre. y agregue una posición relativa a él.

.myNewClass {
    position: relative;
}

Además, asegúrese de que los elementos principales no tengan margen ni relleno. para eso, puedes usar un restablecimiento CSS como este:

* {
    margin: 0;
    padding: 0;
}

Aunque esto asegurará que todos sus elementos no tengan margen o relleno, por lo que debe especificar todo lo que necesita por sí mismo. debes poner esto en la parte superior de tu archivo CSS si quieres usarlo.

0
Hossein Ghanaati 10 may. 2019 a las 21:56

No ha especificado el atributo superior

.header img{
    height:auto;
    left:0;
    top:0;
    margin:0:
    padding:0;
    position:absolute;
    width:100vw;
}
0
SoWhat 10 may. 2019 a las 16:45

¿Por qué no lo intentas?

arriba: -28px; posición: relativa;

Me ayudó una o dos veces en situaciones similares.

0
Željko Jevtić 10 may. 2019 a las 21:36