What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

No white spaces between images

krylol

New member
Hello.

I want to make a gallery with no spaces between the images, all of them stick together with no space between them. I'm using display: flex so they are on the same line, then i use a flex: wrap. To make them take all the container space i read about the align-items: stretch property but it´s not working.

This is the HTML

HTML:
<body>

    <div class="container">
        <nav class="navbar">
            <a href="/home/home.html">Home</a>
            <a href="/pages/galeria.html">Galeria</a>
            <a href="/pages/blog.html">Blog</a>
        </nav>
    </div>
    
    <div class="fotos_galeria">
        <div class="imagenes">
            <img src="/imagenes/fotos_galeria/imagen2.jpg" alt="">
            <img src="/imagenes/fotos_galeria/imagen4.jpg" alt="">
            <img src="/imagenes/fotos_galeria/imagen5.jpg" alt="">
            <img src="/imagenes/fotos_galeria/imagen6.jpg" alt="">
            <img src="/imagenes/fotos_galeria/imagen7.jpg" alt="">
            <img src="/imagenes/fotos_galeria/imagen8.jpg" alt="">
        </div>

    </div>
</body>
</html>


And this is the CSS

CSS:
*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
.container{
    display: flex;
    justify-content: center;
    background-color: black;
    padding: 50px;
    
    
}

.container a{
    margin-top: 10px;
    padding: 100px;
    color: white;
    font-size: 20px;

}

.fotos_galeria{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}


.fotos_galeria img{
    width: 30%;
}

This is what i'm seeing. I want those blank spaces to dissapear, all the images need to be together, have the same size.
 
border-style: is used in the header area of the html document. Very specific alignment. dashed or solid line around your pictures. Spaced out. When you place the picture in an <img src=" "> tag, it will show up as a border around those images. Though it will be a dashed or solid lines. But placed side by side, it should work out that way based on your screen px arrangement.

Sorry. Wrong setup. Then make sure there are no border-style to the header. Just the pictures.
 
Back
Top