需要删除 Body 中元素周围的填充

Question

我是 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>

Answer 1

基于<table> 和<img> 的layout/design 可能不是这些天的最佳方向。

要回答您的问题，您可能会从几个地方看到白色 space。

Spaces 在 table 个单元格之间 - 使用 border-collapse: collapse; 删除。您可能还需要从 table 单元格中删除填充。
Space 图像周围 - 图像是内联元素，因此 space 用于下部，字母形式中低于基线的部分，以及图像周围的 space以及（至少如果你的标记中 <img> 之间有 space。因为你有连续的图像，你可以浮动它们或使用 flexbox 摆脱 space 在它们周围。在其他情况下，您可能希望制作图像 display: block; 以删除内联白色 space.

示例 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>

Answer 2

今天，2016 年，我们使用 flexbox 进行布局，而不是 table（除非您需要让它在旧版浏览器上工作）

html,
body {
  margin: 0
}
div {
  display: flex;
}

<div>
  <img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
  <img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>

<div>
  <img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
  <img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>

如果你真的不会用flexbox，就浮动它们

html,
body {
  margin: 0
}
div:after {
  content: '';
  clear: both;
  display: block;
}
div img {
  float: left;
}

<div>
  <img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
  <img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>

<div>
  <img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
  <img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
  <img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>

需要删除 Body 中元素周围的填充

Need to remove padding around elements within Body

html

css

styles

image

padding

示例 1 - 您可能拥有的东西

示例 2 - 更现代的方法，没有带 FLEXBOX 的表格

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

示例 4 - 使用 FLOAT 的旧学校

示例 5 - 使用 FLEXBOX 的旧学校