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

我是HTML5新手。几年前我曾经编写过HTML代码，但我不熟悉这种新的做事方式。我基本上是从零开始。我已经开始设计和代码的一个网站的开始，我想把。在我继续之前，我想让我所做的看起来正确。每个图像周围都有填充，我不确定如何删除。我需要所有的图像相互对照。我试过把padding: 0和margin: 0放在代码中的所有元素上，但没有任何工作。我做错了什么?

我想去掉填充的图片

下面是我使用的代码片段:

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

今天，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>

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

示例1 -您可能拥有的内容

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

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

示例4 -使用FLOAT的老式学校

示例5 -使用FLEXBOX的旧学校

相关内容

最新更新

热门标签：