如何解决底部边框和背景图像不接触的问题答案

【问题标题】：How do i fix issue where bottom border and background image dont touch如何解决底部边框和背景图像不接触的问题
【发布时间】：2022-01-08 01:32:12
【问题描述】：

我正在编写 HTML 电子邮件的框架，但遇到了拦截器。我一直在尝试在我的代码中添加背景图像，并让它直接接触标题下方的红色边框，但两者之间有一个不舒服的空间。 . .

我尝试了多种不同的班级运动并涉足 CSS，但没有成功。作为替代方案，只要标题显示纯白色背景，我就可以将图像放在标题下方。

<!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>

【问题讨论】：

熟悉现代 CSS 可能很有意义：像 <center> 这样的纯布局标签，以及使用 <table> 进行布局，这些天已被弃用并且已经过时了。您可以尝试使用弹性框来满足您的布局需求。

标签： html css background-image opacity

【解决方案1】：

使用您当前的标记，您可以尝试在 outer 表类上添加一些负边距。我添加了margin-top: -1.5rem; 但是，如果我正在构建它，我会避免使用表格，因为它们非常无响应并导致 x 轴溢出。我建议flex 和divs。 center 元素已弃用。

<!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>

【讨论】：