How do i fix issue where bottom border and background image dont touch

Question

I'm working on a skeleton for an HTML email and I'm running into a blocker. I've been trying to add a background image to my code and have it directly touching the red border underneath the header, but there is an uncomfortable space between the two . . .

I've tried multiple different class movements and dabbled with the CSS but to no success. As an alternative, I would be fine with placing the image underneath the header as long as the header shows a pure white background.

<!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">
  <title>Fan Email Skeleton Jan.7</title>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    line-height: 2.2;
    font-size: 25px;
  }
  
  table {}
  
  td {
    opacity: 1;
  }
  
  .wrapper {
    width: 100%;
    table-layout: fixed;
  }
  
  .webkit {
    max-width: 1100px;
  }
  
  .outer {
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    border-spacing: 0;
    font-family: sans-serif;
    color: black;
  }
  
  .headerImg {
    padding: 85px 150px 85px 150px;
    max-width: 1100px;
    border-bottom: 10px solid red;
  }
  
  .fanImg {
    background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1.jpg');
    background-size: 1200px 1200px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
  }
  
  .targetLink {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }
  
  .targetLink:visited {
    color: black;
    text-align: center;
  }
  
  .copyLink:visited {
    color: rgb(111, 174, 226);
  }
  
  @media screen and (max-width: 600px) {}
  
  @media screen and (max-width: 400px) {}
</style>

<body class="fanBody">
  <center class="wrapper">
    <div class="webkit">
      <table class="outer" align="center">
        <tr>
          <img class="headerImg" src='https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png' width="800">
          <td style=" text-align: center;">
            <table width="100%" style="border-spacing: 0;">
              <tr class="fanImg">
                <td>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="fanImg">
            <table class="fanText">
              <p style="line-height: 3.4 ;">Hello, </p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <a class="targetLink" href='https://google.com'>Click here to Start</a>
              <p>If you are unable to click the link, please copy and past the full URL below into your browser:</p>
              <a class="copyLink" href="">https://google.com</a>
              <p>Thank you! <br> Company Name</p>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </center>
</body>

</html>

It might make sense to familiarise yourself with modern CSS: layout-only tags like ``, as well as using `` for layouts, are deprecated and pretty outdated these days. You can try looking to using flex box to address your layout needs. — Terry, Jan 07 '22 at 17:20

Kameron · Answer 1 · 2022-01-07T17:32:12.490

With your current markup, you can try adding some negative margin on your outer table class. I added margin-top: -1.5rem; However, if I was building this I would avoid using tables as they are very unresponsive and cause overflow on the x-axis. I suggest flex and divs. The center element is deprecated.

<!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">
  <title>Fan Email Skeleton Jan.7</title>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    line-height: 2.2;
    font-size: 25px;
  }
  
  table {}
  
  td {
    opacity: 1;
  }
  
  .wrapper {
    width: 100%;
    table-layout: fixed;
  }
  
  .webkit {
    max-width: 1100px;
  }
  
  .outer {
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    border-spacing: 0;
    font-family: sans-serif;
    color: black;
    margin-top: -1.5rem;
  }
  
  .headerImg {
    padding: 85px 150px 85px 150px;
    max-width: 1100px;
    border-bottom: 10px solid red;
    
  }
  
  .fanImg {
    background-image: url('https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1.jpg');
    background-size: 1200px 1200px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
    margin-bottom: -1.3rem;
  }
  
  .targetLink {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }
  
  .targetLink:visited {
    color: black;
    text-align: center;
  }
  
  .copyLink:visited {
    color: rgb(111, 174, 226);
  }
  
  @media screen and (max-width: 600px) {}
  
  @media screen and (max-width: 400px) {}
</style>

<body class="fanBody">
  <center class="wrapper">
    <div class="webkit">
      <table class="outer" align="center">
        <tr>
          <img class="headerImg" src='https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png' width="800">
          <td style=" text-align: center;">
            <table width="100%" style="border-spacing: 0;">
              <tr class="fanImg">
                <td>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="fanImg">
            <table class="fanText">
              <p style="line-height: 3.4 ;">Hello, </p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <a class="targetLink" href='https://google.com'>Click here to Start</a>
              <p>If you are unable to click the link, please copy and past the full URL below into your browser:</p>
              <a class="copyLink" href="">https://google.com</a>
              <p>Thank you! <br> Company Name</p>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </center>
</body>

</html>

How do i fix issue where bottom border and background image dont touch

1 Answers1