Почему на моих веб-страницах продолжают появляться небольшие пространства?

StackOverflow https://stackoverflow.com/questions/134683

  •  02-07-2019
  •  | 
  •  

Вопрос

Возможно, это глупый вопрос, но если есть лучший или правильный способ сделать это, я бы хотел его изучить.

Я сталкивался с этим несколько раз, в том числе недавно, когда в обработанной версии моей HTML-страницы появлялись небольшие пробелы.Интуитивно я думаю, что их там не должно быть, потому что вне текста или объектов форматирование HTML страницы не должно иметь значения, но, по-видимому, оно имеет значение.

Я имею в виду следующее: у меня есть файл Photoshop от клиента о том, как они хотят, чтобы их сайт выглядел.Они хотят, чтобы изображение в этом файле выглядело идеально по пикселям.

В одном из мест на странице требуется строка меню, каждое из которых меняет значение при наведении курсора, действует как гиперссылка и т. д.В файле Photoshop это одна длинная полоса, поэтому дешевый и простой способ сделать это — просто разделить этот сегмент на несколько изображений, а затем разместить их рядом друг с другом в файле.

Инстинктивно я выкладываю это вот так (есть еще кое-что, но это суть)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

и так далее.

Проблема в том, что между изображениями есть такое крошечное пространство, что неприемлемо, поскольку клиент хочет, чтобы эта вещь была идеальной по пикселям (и это просто выглядит плохо).

Один из способов добиться правильного рендеринга — удалить возвраты каретки между изображениями.

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

Из-за этого изображения наталкиваются друг на друга (желаемый эффект), но это делает строку невероятно длинной и код становится сложнее поддерживать (здесь он оборачивается в SO, и это упрощенная версия - настоящая имеет более длинные имена файлов и JavaScript добавлено для зависания).

Мне кажется, что этого не должно происходить, но похоже, что возврат каретки в HTML отображается как небольшое пустое пространство.И это происходит во всех браузерах, похоже.

Прав я или нет, считая, что два приведенных выше фрагмента должны отображаться одинаково?И что-то я делаю не так?Может быть, сохранение файла с неправильной кодировкой?Должен ли я вместо этого сделать каждую из этих ссылок идеально позиционированным элементом CSS?

Это было полезно?

Решение

Пробелы (включая возврат каретки) обычно отображаются как пробел во всех браузерах.

Вам нужно расположить элементы друг за другом, но можно воспользоваться хитростью:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

Это тоже выглядит немного некрасиво, но все равно лучше, чем одна строка.Вы можете изменить форматирование, но идея состоит в том, чтобы добавлять возвраты каретки внутри элементов, а не между ними.

Другие советы

Я не знаю, является ли это достаточно общим для вашей страницы, но вы могли бы классифицировать эти конкретные а теги и переместите их все влево, тогда они объединятся независимо от форматирования вашего HTML. 

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>

Это часть спецификации HTML: пробелы есть в разметке, поэтому они считаются частью документа.

Единственный вариант, который у вас есть, поскольку вам не нравится форматирование, — это сломать html-теги:

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

что, на мой взгляд, нежелательно, или создавайте HTML динамически - либо с помощью JavaScript, либо с использованием системы шаблонов и динамического HTML.

Причина проста:В HTML пробелы имеют значение, но только один раз.Повторяющиеся пробелы игнорируются, отображается только первый.

Единственный надежный способ избежать этого — как и вы, не оставлять пробелов между элементами.

Когда макет на основе таблиц будет менее удобен, чем сейчас, вы можете использовать таблицу с нулевой границей и нулевым заполнением для выравнивания ваших элементов, располагая их в отдельных строках исходного кода.

Я справляюсь с этим, используя неупорядоченный список и делая каждое изображение/ссылку элементом.Затем используйте CSS для отображения каждого элемента в строке и переместите их влево.

Это даст вам большую гибкость и сделает разметку более читаемой.

Поведение, которое вы продемонстрировали выше, верно, поскольку браузер рассматривает возврат каретки как пробел.Чтобы исправить это, вы можете стилизовать его следующим образом:

a { display: block; float: left; }

Обратите внимание, что приведенное выше правило применяется ко всем ссылкам, поэтому вы можете сузить селектор только до определенных элементов, например:

#nav a { display: block; float: left; }

Если вы собираетесь создать интерфейс с вкладками на веб-сайте, приложите немало усилий, чтобы сделать это правильно, и это того стоит.Существует множество веб-сайтов с отличными примерами реализации вкладок CSS.Рассмотрите возможность использования одного из них.

Вот этот имеет множество вкладок CSS+Javascript/AJAX.Или посмотреть этот набор простых примеров CSS (некоторые стилизованные).Наконец, взгляните на это, на самом деле, очень круто генератор вкладок.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top