html - 需要删除体内元素周围的填充

我是HTML5的新手。几年前，我曾经为HTML编写代码，但对新的做事方式并不熟悉。我基本上是从头开始。我已经开始为我要建立的网站设计并开始编写代码。在进一步研究之前，我想让自己看起来正确。我不确定如何删除每个图像周围的填充。我需要所有图像相互抵触。我尝试在代码中的所有元素上添加padding：0和margin：0，但是没有任何效果。我究竟做错了什么？

Images with padding I want removed

这是我正在使用的代码的片段：

    <style>
    html, body { padding: 0; margin: 0 }
    </style>
    </head>
  <body>

  <header>
  <img src="images/logo.gif" />
  </header>

  <nav>
  <table>
  <tr>
  <td>
  <img src="images/purpleBarLeftOfNav.gif" width="173" height="77" alt="" title="" />
  <img src="images/navHomeTopSel.gif" alt="Home" title="" />
  <img src="images/navAboutTop.gif" alt="About" title="" />
  <img src="images/navServicesTop.gif" alt="Services" title="" />
  <img src="images/navPortfolioTop.gif" alt="Portfolio" title="" />
  <img src="images/navContactTop.gif" alt="Contact" title="" />
  <img src="images/purpleBarPgTitleHome.gif" alt="Home" title="" />
  </td>
  </tr>

  <tr>
  <td>
  <img src="images/spacerWhite.gif" width="114" height="146" alt="spacer" title="" />
  <img src="images/phoneEmail.gif" width="59" height="146" alt="Phone and Email" title="" />
  <img src="images/navHomeBtmSel.gif" width="32" height="146" alt="Home" title="" />
  <img src="images/navAboutBtm.gif" width="32" height="146" alt="About" title="" />
  <img src="images/navServicesBtm.gif" width="32" height="146" alt="Services" title="" />
  </td>
  </tr>
  </table>
  </body>

最佳答案

现在，基于<table>和<img>的布局/设计可能不是最好的方向。

要回答您的问题，您可能会在几个地方看到空白。

表单元格之间的空格-使用border-collapse: collapse;删除。您可能还必须从表格单元格中删除填充。
图像周围的空间-图像是内联元素，因此具有用于下级的空间，低于基线的字母形式的各个部分以及图像周围的空间（至少如果标记中的<img>之间有空格）。由于您有连续的图像，因此可以浮动它们或使用flexbox消除它们周围的空间；在其他情况下，您希望将图像制成display: block;来删除行内空白。

示例1-您可能拥有的

td {
  background-color: red;
}

<table>
  <tr>
    <td>
      <img src="http://placehold.it/100x100/ffcc00">
    </td>
  </tr>
  <tr>
    <td>
      <img src="http://placehold.it/100x100/ffcc00">
    </td>
  </tr>
</table>

示例2-更现代的方法，没有带FLEXBOX的桌子

.flex {
  display: flex;
}

<header>

  <div class="flex">
    <img src="http://placehold.it/100x100/ffcc00">
    <img src="http://placehold.it/100x100/aacc00">
    <img src="http://placehold.it/100x100/ffcc00">
  </div>

  <nav class="flex">
    <img src="http://placehold.it/50x50/ffcc00">
    <img src="http://placehold.it/50x50/aacc00">
    <img src="http://placehold.it/50x50/ffcc00">
    <img src="http://placehold.it/50x50/aacc00">
    <img src="http://placehold.it/50x50/ffcc00">
    <img src="http://placehold.it/50x50/aacc00">
  </nav>

</header>

示例3-更现代的方法，没有带FLOAT的表

/* Clearfix to clear floats - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.cf:after {
  clear: both;
}
img {
  float: left;
}

<header>

  <div class="cf">
    <img src="http://placehold.it/100x100/ffcc00">
    <img src="http://placehold.it/100x100/aacc00">
    <img src="http://placehold.it/100x100/ffcc00">
  </div>

  <nav class="cf">
    <img src="http://placehold.it/50x50/ffcc00">
    <img src="http://placehold.it/50x50/aacc00">
    <img src="http://placehold.it/50x50/ffcc00">
    <img src="http://placehold.it/50x50/aacc00">
    <img src="http://placehold.it/50x50/ffcc00">
    <img src="http://placehold.it/50x50/aacc00">
  </nav>

</header>

示例4-带FLOAT的老学校

td {
  padding: 0;
  background-color: red;
}
table {
  border-collapse: collapse;
}
img {
  float: left;
}

<table>
  <tr>
    <td>
      <img src="http://placehold.it/100x100/ffcc00">
      <img src="http://placehold.it/100x100/11cc00">
    </td>
  </tr>
  <tr>
    <td>
      <img src="http://placehold.it/100x100/ffcc00">
    </td>
  </tr>
</table>

示例5-使用FLEXBOX的老派

td {
  display: flex;
  padding: 0;
  background-color: red;
}
table {
  border-collapse: collapse;
}

<table>
  <tr>
    <td>
      <img src="http://placehold.it/100x100/ffcc00">
      <img src="http://placehold.it/100x100/11cc00">
    </td>
  </tr>
  <tr>
    <td>
      <img src="http://placehold.it/100x100/ffcc00">
    </td>
  </tr>
</table>