CODEWITHSUNDEEP
htmlcsscss-tables
user5762586
user5762586

Reputation:

Mysterious Table Row Padding/Margin

I'm having an issue in which I can see some mysterious padding/margin on a table row which I do not require, but am unable to remove.

Please see screenshot below of the area highlighted with a blue box:

enter image description here

The code is here:

https://codepen.io/mattsmith/pen/GWZNVN

I have tried many things such as margin: 0, border-spacing: 0, padding: 0 etc. Can anybody please help me out here? As I need the blue box to be flush with the image.

Upvotes: 2

Views: 284

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

An img is an inline element "replaced content" which will inherit line-height, and you're seeing the line-height spacing. You can fix it by using line-height: 0; or font-size: 0; on the parent, or setting either display: block; or vertical-align: top on the image.

* {
  font-family: Open Sans;
}

table {
  border: 1px solid #000;
}

th {
  border: 1px solid red;
  vertical-align: top;
  font-weight: normal;
}

p {
  margin: 0;
}
img.banner {
  /* or either of these */
  /* display: block; */
  /* vertical-align: top; */
}
<body style="padding: 50px; background: #f7faf9">
<table style="border-collapse: collapse; margin: 0 auto; margin-top: 20px; width: 100%; max-width: 800px;">
  <tr>
    <th><img style="float: left; width: 70px" src="http://i.imgur.com/LsRs9OY.png"></th>
    <th><p style="text-align: right; font-size: 14px">February 14, 2017<br>Order <b>#4020</b></p></th>
  </tr>
  <tr>
    <th style="padding-top: 25px; line-height: 0;" colspan="2"><img style="width: 100%" class="banner" src="https://s3.amazonaws.com/zcom-media/sites/a0i0L00000QylPjQAJ/media/mediamanager/media_page_banner.jpg"></th>
  </tr>
    <tr>
    <th style="background: #35a0c6; padding-top: 25px;" colspan="2"></th>
  </tr>
</table>
</body>

Upvotes: 4

Related Questions