How to get rid of white space in card

Question

I have designed an image with some content on the card. For some reason, I am getting a space between an image and its content. How do I get rid of that space across all devices.

HTML:

 <div class="project-card hidden" id="modal1">
            
         <div class="overlay">
            <img src="https://cnet1.cbsistatic.com/img/93uMH3e8dHhNEucNfioED7-TvAU=/2018/07/31/abf6d5b3-96ef-489f-b223-26a4cb70e568/img-7041.png" alt="Project1 Picture">
            <div class="overlay-content">
                <h2>Game</h2>
                <p>Lorem</p>
            </div> 
        </div> 
</div>

CSS

.project-card{
    width: 40%;
    position: relative;
    position: fixed;
    top: 15%;
    left: 10%;
    z-index: 1;
}
.overlay{
    width: 100%;
    height: auto;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 1.2);
/*  background-color: royalblue; */  
  
    img{
        width: 100%;
        height: 180px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }
}

.overlay-content{
    background-color: #37393d;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding-left: 15px;
    padding-top: 10px;
    padding-right: 15px;
    font-family: 'Roboto', sans-serif;

    h2{
        color: #ffde59;
        font-size: 1.3em;
        padding-top: 10px;
        margin-bottom: 20px;
    }
    p{
       color: #fff;
      padding-bottom: 20px;
    }
}

Here is the visual representation: Codepen

Please any help would be appreciated.

[see the reason behind whitespace here](https://www.tutorialrepublic.com/faq/how-to-remove-white-space-under-an-image-using-css.php) — Pirate, Dec 17 '20 at 21:07

paceaux · Accepted Answer · 2020-12-17T21:10:11.267

Set the image to display:block:

    img{
        width: 100%;
        display: block;
        height: 180px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

By default images are set to display:inline, as are all replaced elements. The div below, however, is set to display:block by default. So the div wants to take up all space it can. A display:inline won't. So by setting it to display:block, you're telling the image to take up more space, and that it doesn't have to try and make the image sit inline with text.

This will be enough to eliminate the whitespace.

score 0 · Answer 2 · answered Dec 17 '20 at 21:00

0

You just have to make background of your whole card the same color as a background of your content div.

Just add these 2 lines in your .project-card class in css :

display : flex;
background-color: #37393d;

Let me know if it worked :)

answered Dec 17 '20 at 21:00

Just Alex

457
4
6

1

This conceals the gap. It doesn't eliminate it. – isherwood Dec 17 '20 at 21:10
Thank You for replying. Setting display: block; seems more appropriate. – Zed Dec 17 '20 at 21:13

How to get rid of white space in card

2 Answers2