需要删除 Body 内元素周围的填充答案

【问题标题】：Need to remove padding around elements within Body需要删除 Body 内元素周围的填充
【发布时间】：2017-02-22 19:13:16
【问题描述】：

我是 HTML5 新手。几年前我曾经编写过 HTML 代码，但我不熟悉新的做事方式。我基本上是从零开始。我已经开始了我想要建立的网站的设计和代码的开始。在我走得更远之前，我想让我所做的看起来正确。每个图像周围都有填充，我不确定如何删除。我需要将所有图像相互对比。我尝试将 padding: 0 和 margin: 0 放在代码中的所有元素上，但没有任何效果。我做错了什么？

Images with padding I want removed

这是我正在使用的代码的 sn-p：

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

【问题讨论】：

img {padding:0; margin:0}? img {display:inline-block;}?
@RuslanOsmanov 不知道为什么您的评论被赞成，它是doesn't work。
@LGSon，@hungerstar，嗯，应该是img {float:left; } table {border-collapse:collapse} td {padding:0;margin:0}。 img {margin:0} 也不会受到伤害。 Example
我很好奇，为什么img { margin: 0; }？
@hungerstar，如果某些浏览器决定设置默认边距 =)

标签： html css image styles padding

【解决方案1】：

基于<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>

【讨论】：

在每个单元格中添加更多图像会发生什么？ ...就像在 OP 的示例中一样
不做任何事情，图像将垂直堆叠。要修复图像需要浮动或使用flexbox。目前作为 OP，我会更关心基于表格的布局以及将网站的大量文本锁定在图像中。
嗯，OP 确实连续有很多图像，那么这是一个不同的问题吗？ ...刚刚注意到您评论的编辑
谢谢！！工作完美:)
@LGSon 是的，我的回答也是为了解决您的问题。

【解决方案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>

【讨论】：