css fix white space appearing after image

Question

I have tried all the option that were know to me. Please help me in removing the white space between image and the div tag. I don't know why white is appearing below the image and div. I can not figure out where the CSS'm wrong. I have been working on it since morning but I am not able to find the solution this.

Please help me. I have uploaded the screenshot.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rent-O-Roof</title>
    <style type="text/css">
      body{
      width: 100%;
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      }
      .topnav{
      overflow: hidden;
      background-color: #333;
      }
      .topnav a{
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      }
      .topnav a:hover{
      background-color: #ddd;
      color: black;
      }
      .active{
      background-color: #4CAF50;
      color: white;
      }
      .topnav .icon{
      display: none;
      }
      @media screen and (max-width: 600px){
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
      float: right;
      display: block;
      }
      }
      @media screen and (max-width: 600px){
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
      }
      .topnav.responsive a{
      float: none;
      display: block;
      text-align: left;
      }
      }
      /* Style the footer */
      .footer {
      background-color:#777555 ;
      padding: 10px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="#aboutus">About US</a>
      <a href="#contact">Contact US</a>
      <a href="#about">google form</a>
      <a href="#about">facebook page</a>
      <a href="#about">CUSTOMER REVIEW</a>
      <a href="#about">CAREERS</a>
      <a href="#about">TERM</a>
      <a href="#about">OPTIONS</a>
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
    <script>
      function myFunction() {
          var x = document.getElementById("myTopnav");
          if (x.className === "topnav") {
              x.className += " responsive";
          } else {
              x.className = "topnav";
          }
      }
    </script>
    <div style="overflow: hidden;">
      <img src="file:///Users/varunwadhwa/Desktop/Header.png" style="width: 100%; height: auto; overflow: hidden; padding: 0;">
      <div style="background-color: red; font-size: 48px;">About Us
      </div>
    </div>
  </body>
</html>

Without running your code, I'm willing to bet that if you remove the actual space (newline + spaces) between your `img` and `div`, the problem will disappear. You can get around this with CSS by setting `font-size: 0` or using a different display layout. — Scott, May 04 '18 at 17:39

Zhenya Telegin · Answer 1 · 2018-05-04T17:57:33.713

It is space for descenders (the bits that hang off the bottom of 'y' and 'p') since img is an inline element by default. This attribute removes the gap.

Just add display: block to your img style.

jsfiddle

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rent-O-Roof</title>
    <style type="text/css">
      body{
      width: 100%;
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      }
      .topnav{
      overflow: hidden;
      background-color: #333;
      }
      .topnav a{
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      }
      .topnav a:hover{
      background-color: #ddd;
      color: black;
      }
      .active{
      background-color: #4CAF50;
      color: white;
      }
      .topnav .icon{
      display: none;
      }
      @media screen and (max-width: 600px){
      .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
      float: right;
      display: block;
      }
      }
      @media screen and (max-width: 600px){
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
      }
      .topnav.responsive a{
      float: none;
      display: block;
      text-align: left;
      }
      }
      /* Style the footer */
      .footer {
      background-color:#777555 ;
      padding: 10px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="#aboutus">About US</a>
      <a href="#contact">Contact US</a>
      <a href="#about">google form</a>
      <a href="#about">facebook page</a>
      <a href="#about">CUSTOMER REVIEW</a>
      <a href="#about">CAREERS</a>
      <a href="#about">TERM</a>
      <a href="#about">OPTIONS</a>
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
    <script>
      function myFunction() {
          var x = document.getElementById("myTopnav");
          if (x.className === "topnav") {
              x.className += " responsive";
          } else {
              x.className = "topnav";
          }
      }
    </script>
    <div style="overflow: hidden;">
      <img src="http://via.placeholder.com/350x150" style="width: 100%; height: 150px; overflow: hidden; padding: 0; display: block;">
      <div style="background-color: red; font-size: 48px;">About Us
      </div>
    </div>
  </body>
</html>

sir can you please explain the cause of the problem thank you sir @Zhenya Telegin — Varun Wadhwa, May 04 '18 at 17:50
It is space for descenders (the bits that hang off the bottom of 'y' and 'p') since `img` is an inline element by default. This attribute removes the gap. Please upvote if I helped :) — Zhenya Telegin, May 04 '18 at 17:55
yes sir it worked for me. thank you sir helping me @ Zhenya Telegin — Varun Wadhwa, May 04 '18 at 18:07

score 0 · Answer 2 · answered May 04 '18 at 17:42

0

add display: block to the img tag like Zhenya Telegin said or give the "about" div a negative margin-top value, something like margin-top: -4px

answered May 04 '18 at 17:42

FutoRicky

903
2
9
22

thank yo sir helping me sir @FutoRicky – Varun Wadhwa May 04 '18 at 17:46
sir can you please explain the cause of the problem thank you sir @FutoRicky – Varun Wadhwa May 04 '18 at 17:51

css fix white space appearing after image

2 Answers2