CODEWITHSUNDEEP
htmlcssfrontend
user12635663
user12635663

Reputation:

White space before an image

There is a white space before the image in the second row. I don’t know why this is happening. Margin and padding are fine.

All images are of the same size, but there is white space on the second row before the image. 2 more images can fit in there.

Upon inspecting it's just showing white space from the body. No excess margin or padding is there from any of the images.

Used – "float: left;"

The images on the third row and further are fine. Can someone figure out the issue, why is this happening?

Click to see image

HTML File:

<!DOCTYPE html>
<html>
<head>
    <title>Photo Gallery</title>
    <link rel="stylesheet" type="text/css" href="gallery.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,800&display=swap" rel="stylesheet">
</head>
<body>

<p>Photo Gallery</p>

<img src="a (1).jpg">
<img src="a (2).jpg">
<img src="a (3).jpg">
<img src="a (4).jpg">
<img src="a (5).jpg">
<img src="a (6).jpg">
<img src="a (7).jpg">
<img src="a (8).jpg">
<img src="a (9).jpg">


</body>
</html>

CSS File:

img{
    width: 30%;
    float: left;
    margin: 1.66%;
    padding: 0;

}
p{
    font-family: Raleway;
    margin-left: 1.66%;
    font-size: 30px;
    font-weight: 800;
    border-bottom: 3px solid #f1f1f1;   
    width:30%;
    padding-bottom: 30px;
}

Upvotes: 0

Views: 157

Answers (2)

Nitheesh
Nitheesh

Reputation: 20016

This is happening because the images are of different height. The best solution with display block layout will be using a width to the image and setting the display: inline-block

img{
    width: 30%;
    /* margin: 1.66%; */
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}
p{
    font-family: Raleway;
    margin-left: 1.66%;
    font-size: 30px;
    font-weight: 800;
    border-bottom: 3px solid #f1f1f1;   
    width:30%;
    padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
    <img src="https://www.w3schools.com/html/img_girl.jpg">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg">
</div

Or else you can go for flex display. This will ensure that the child elemets are of same height, without explicitly mentioning the height.

.image-item {
    display: flex;
    flex-direction: column;
    width: 30%;
    margin: 1.66%;
    padding: 0;
    justify-content: center;
}
img{
    width: 100%;
}
.image-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
p {
    font-family: Raleway;
    margin-left: 1.66%;
    font-size: 30px;
    font-weight: 800;
    border-bottom: 3px solid #f1f1f1;
    width: 30%;
    padding-bottom: 30px;
}
<p>Photo Gallery</p>
<div class="image-container">
    <div class="image-item">
    <img src="https://www.w3schools.com/html/img_girl.jpg" />
    </div>
    <div class="image-item">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg" />
    </div>
    <div class="image-item">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg" />
    </div>
    <div class="image-item">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg" />
    </div>
    <div class="image-item">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg" />
    </div>
    <div class="image-item">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg" />
    </div>
    <div class="image-item">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg" />
    </div>
    <div class="image-item">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg" />
    </div>
</div>

Upvotes: 1

Marios Nikolaou
Marios Nikolaou

Reputation: 1336

It's the margin property.

img{
    width: 30%;
    float: left;
    margin: 0 1.66%;
    padding: 0;
}
 p{
    font-family: Raleway;
    margin-left: 1.66%;
    font-size: 30px;
    font-weight: 800;
    border-bottom: 3px solid #f1f1f1;   
    width:30%;
    padding-bottom: 30px;
}
<p>Photo Gallery</p>

<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">

Upvotes: 1

Related Questions