Необходимо удалить прокладку вокруг элементов внутри тела

Я новичок в HTML5. Я использовал код HTML несколько лет назад, но я не знаком с новыми способами делать что-то. Я в основном начинаю с нуля. Я начал дизайн и начало кода для веб-сайта, который я хочу выразить. Прежде чем я пойду дальше, я хотел получить то, что я сделал правильно. У каждого изображения есть прокладка, и я не уверен, как ее удалить. Мне нужны все изображения, чтобы противостоять друг другу. Я пробовал положить прописку: 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>

html,css,image,styles,padding,

0

Ответов: 2

0 принят

A <table>и <img>основанный макет / дизайн, вероятно, не лучшее направление для управления в эти дни.

Чтобы ответить на ваш вопрос, вы, вероятно, видите пустое место из нескольких мест.

  1. Пробелы между обвалом границ: сбой; ячейки - использовать <img>для удаления. Возможно, вам придется удалить прописку из ячеек таблицы.
  2. Пространство вокруг изображений - изображения являются встроенными элементами и как таковые имеют пространство для descenders, части буквенной формы, которые падают ниже базовой линии, и пространство вокруг изображения (по крайней мере, если между flexboxвашим разметкой есть пробел . изображения в строке, которые вы можете плавать или использовать, чтобы избавиться от пространства вокруг них. В других случаях вы хотите, чтобы изображения удаляли встроенное пустое пространство.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>

Пример 1 - Что вы, вероятно, имеете

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

Пример 2 - Более современный подход, НЕТ ТАБЛИЦ с / * Clearfix для очистки поплавков - http://nicolasgallagher.com/micro-clearfix-hack/ * . сравни : перед тем , . cf : after { content : "" ; / * 1 * / display : table ; / * 2 * / } . cf : после { 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>
td {
  padding: 0;
  background-color: red;
}
table {
  border-collapse: collapse;
}
img {
  float: left;
}

Пример 3 - Более современный подход, НЕТ ТАБЛИЦ с FLOAT

<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>
td {
  display: flex;
  padding: 0;
  background-color: red;
}
table {
  border-collapse: collapse;
}

Пример 4 - Старая школа с FLOAT

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

Пример 5 - Старая школа с FLEXBOX

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

1

Сегодня, 2016, мы используем flexboxдля макета, а не table(если вам не нужно заставить его работать в старых браузерах)

<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

И если вы действительно не можете использовать 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>

HTML, CSS, изображения, стили, отступы,
Похожие вопросы
Яндекс.Метрика