Question

我是HTML5的新手。我曾经在几年前编写HTML代码，但我不熟悉新的做事方式。我基本上是从头开始的。我已经开始设计和我想要建立的网站的代码的开头。在我走得更远之前，我想得到我所做的正确看法。每张图片周围都有填充物，我不确定如何移除。我需要所有图像相互贴合。我已经尝试在代码中的所有元素上添加填充：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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果你真的不能使用flexbox，那就把它们漂浮一下

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

基于<table>和<img>的布局/设计可能不是最近的标题。

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

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

示例1 - 您可能拥有的

＆＃13;

display: block;

＆＃13;

td {
  background-color: red;
}

＆＃13;

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

＆＃13;

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

＆＃13;

.flex {
  display: flex;
}

＆＃13;

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

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

示例4 - FLOAT的老学校

＆＃13;

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

＆＃13;

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

＆＃13;

示例5 - 使用FLEXBOX的老学校

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案:

示例1 - 您可能拥有的

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

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

示例4 - FLOAT的老学校

示例5 - 使用FLEXBOX的老学校