Michelle Michelle - 1 month ago 7
CSS Question

Need to remove padding around elements within Body

I am new to HTML5. I used to code HTML years ago, but I am not familiar with the new ways of doing things. I'm basically starting from scratch. I have started a design and the beginnings of code for a website I want to put up. Before I go farther, I wanted to get what I have done looking properly. There is padding around each image that I'm am unsure of how to remove. I need all images to put up against each other. I've tried putting padding: 0 and margin: 0 on all elements in the code, but nothing is working. What am I doing wrong?

Images with padding I want removed

Here's a snippet of the code I'm using:

<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

A <table> and <img> based layout/design is probably not the best direction to be heading these days.

To answer your question you're likely seeing white space from a couple of places.

  1. Spaces between table cells - use border-collapse: collapse; to remove. You might have to remove padding from the table cells as well.
  2. Space around images - images are inline elements and as such have space for descenders, the parts of a letter form that fall below the baseline, and space around the image as well (at least if there's space between the <img> in your markup. Since you have images in a row you can float them or use flexbox to get rid of the space around them. In other instances you'd want to make the images display: block; to remove the inline white space.

Example 1 - What you likely have

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>

Example 2 - Modern approach, NO TABLES with 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>

Example 3 - Modern approach, NO TABLES with 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>

Example 4 - Old school with 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>

Example 5 - Old school with 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>

Comments