0

I've been trying to add an image to a div with no padding and it seems to have issues sizing correctly. What it should display is what is generally attached below but without the extra space at the bottom, but what it does display (even after messing around with the CSS I've tried) displays the dreadful extra space at the bottom.

I've tried min-height, max-height, manually setting the height in pixels, and overflow: hidden;

Here is my CSS and HTML:

div.container {
    padding: 3px;
    border: 1px solid black;
}

div.container2 {
    border: 1px solid black;
}

div.container2 .header {
    overflow: hidden;
    height: auto;
}

div.cascade {
    margin: auto;
    width: max-content;
}

div.blackbar {
    background-color: black;
    padding-left: 3px;
    padding-right: 3px;
    color: white;
}

.blackbar a {
    color: white;
}

<!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">
    <link rel="stylesheet" href="css/gbook.css">
    <title>GBook</title>
</head>
<body>
    <div class="cascade">
        <div class="blackbar"><a href="http://">Log In</a> | <a href="http://">Sign Up</a></div>
        <div class="container2"><img src="assets/gbheader.png" alt="GBook" width="440px" height="68px"></div><br>
        <div class="container">qqq</div>
    </div>
</body>
</html>

Please let me know of any potential solutions.

Nycrite
  • 1

1 Answers1

0

Thanks to Laif I was able to simply set img's display to block and it fixed the issue. Thanks so much.

Nycrite
  • 1