'"Display: block;" working inside <img> tag but not inside <style> tag

I have a html code where I don't want a white space between an image and the next row of my table.

Here is the code so far :

<head>
  <style type="text/css">
    @media screen and (max-device-width: 480px) {
      img {
        height: auto;
        width: 100%;
        /* If display:block; is here it does nothing */
      }
      table[class=tab] {
        width: 90%;
        font-size: 0px;
      }
      font[class=mainText] {
        font-size: 15px;
      }
      i[class=mainText] {
        font-size: 15px;
      }
    }
  </style>
</head>

<body bgcolor="#efefef">
  <table class="tab" border="0" cellspacing="0" cellpadding="0" align="center" width="600" bgcolor="#efefef">
    <tr>
      <td colspan="5">
        <img src="header.png" alt="header" width="600" height="100%" /><!-- If i put style="display: block;" here it works -->
      </td>
    </tr>
    <tr>
      <td colspan="5">
        <p style="Margin: 0px 0px; color:#0098b6; font:19px sans-serif; line-height:24px;text-align:center;font-weight:bold;padding : 0px 20px 0px 20px;background-color:#f1e5dc;">
        </p>
      </td>
    </tr>
    <tr>
      <td colspan="5">
        <img src="camerone.png" alt="girl" width="600" height="100%" />
      </td>
    </tr>

If I add a style="display:block;" inside my two img tags, the white spaces disappear but if i try to put it inside my @media queries in img{} it does nothing. Why?

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions