0

I am a beginner. I am practicing HTML and CSS. I got a problem. I have taken a <div> for image. Inside the <div> I have taken image with <img>. But there is a problem I am facing. Every image taken by <img> is taking extra area form bottom of the image.

Here is a output image. I marked the area with red color.

enter image description here

My HTML and CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* ---------------------------- Top -------------------------------- */
.top {
    display: flex;
    margin: 0 15%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.top .part1 {
    width: 40%;
    height: 100vh;
    text-align: center;
    padding: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.top .part1 .title {
    font-size: 45px;
}
.top .part1 .subtitle {
    font-size: 20px;
    padding-bottom: 12%;
}
.top .part1 a {
    text-decoration: none;
    color: black;
}
.top .part1 .btn {
    padding: 4% 10%;
    border: 1px solid black;
    border-radius: 50px;
}
.top .part2 {
    width: 60%;
    background: url(./images/top.jpg) no-repeat center center/cover;
}
/* -------------------------------- Work --------------------------------------------- */
.work {
    margin: 0 15%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* --------------------------------- Our Work -------------------------------------------- */
.our-work {
    width: 100%;
    padding: 2.5%;
    text-align: center;
    background: #333;
    
}
.our-work p {
    border-left: 1px dotted white;
    border-right: 1px dotted white;
    display: inline-block;
    padding: 0 1%;
    color: white;
    font-size: 20px;
}
/* ---------------------------- Image ------------------------------------------------- */
img {
    width: 100%;
}
/* ---------------------------- Image Text ----------------------------------------------- */
.image-text {
    padding: 3%;
    background: #000;
    color: white;
    text-align: center;
}
/* ---------------------------- Image Text Head ------------------------------------------ */
.image-text .head {
    font-size: 20px;
    padding-bottom: 2%;
}
/* ---------------------------- Image Text Text ------------------------------------------ */
.image-text .text {
    font-size: 16px;
}
<!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>Acme Photography</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="top">
        <div class="part1">
            <p class="title">ACME</p>
            <p class="title">PHOTOGRAPHY</p>
            <p class="subtitle">Beautiful Natural Photography</p>
            <a href="#" class="btn">View Work</a>
        </div>
        <div class="part2"></div>
    </div>
    <div class="work">
        <div class="our-work"><p>Our Work</p></div>

        <div class="image1"><img src="./images/1.jpg" alt=""></div>
        <div class="image-text">
            <p class="head">Photo One</p>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
        </div>

        <div class="image2"><img src="./images/2.jpg" alt=""></div>
        <div class="image-text">
            <p class="head">Photo Two</p>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
        </div>

        <div class="image3"><img src="./images/3.jpg" alt=""></div>
        <div class="image-text">
            <p class="head">Photo Three</p>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
        </div>

        <div class="image4"><img src="./images/4.jpg" alt=""></div>
        <div class="image-text">
            <p class="head">Photo Four</p>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
        </div>

        <div class="image5"><img src="/images/5.jpg" alt=""></div>
        <div class="image-text">
            <p class="head">Photo Five</p>
            <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
        </div>
    </div>
</body>
</html>

How can I fix that? Please help me.

2 Answers2

1

By default, <img> tag has display: inline-block CSS property.

To remove the bottom space, apply CSS display: block to image as:

img {
  display: block;
  width: 100%;
}
Sergey Sklyar
  • 1,902
  • 1
  • 15
  • 27
-1

you can try to place this in your css:

img {
    width: 100%;
    top: 0;
}

I don't know, try it.

Webinator06
  • 1