0

You have to view the snippet in full screen in order to see the problem. As you can see there's empty space below the image and I'm not sure why is it happening. At first I assumed its just that my aspect ratio is not correct, however, after fiddling with the image I'd always get the same result even if I were to increase either the width or the height.

*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
        color: rgba(0, 0, 0, 0.8);
    }
    body {
        background-color: #f1f1f1;
        font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    }
    .wrapper {
        width: 70%;
        margin: 0 auto;
    }
    .flex {
        display: flex;
    }
    .project-info {
        flex: 1;
        padding: 30px;
    }
    .project-thumbnail {

    }
    .projects {
        padding: 40px 0 0 0;
        font-size: 1.1em;
        line-height: 30px;
    }
    .project {
        background-color: #fefefe;
        margin-bottom: 40px;
        border-radius: 4px;
        box-shadow: 0 5px 8px 0 rgba(0,0,0,.2);
    }
    .project-name {
        margin-bottom: 30px;
    }
    .project-description {
        margin-bottom: 20px;
    }
    .thumbnail {
        width: 600px;
    }
<div class='wrapper'>
<section class='projects'>
                <div class="project flex">
                    <div class="project-info">
                        <h1 class='project-name'>Test</h1>
                        <p class='project-description'>Test</p>
                        <p class='project-technologies'>Test</p>
                    </div>
                    <div class="project-thumbnail">
                        <img class='thumbnail' src="https://librarystorage.files.wordpress.com/2013/09/wall10-1000x1000px-seamless.jpg" alt="thumbnail">
                    </div>
                </div>
</section
</div>
Onyx
  • 5,186
  • 8
  • 39
  • 86

1 Answers1

1

You are setting a line-height on .projects, therefore it affects your entire block. Simply add : 

.project-thumbnail {
    line-height: 0;
}

to remove the line-height on your image block.

hexangel616
  • 346
  • 2
  • 19