"пробел" добавляется автоматически браузером и отображает "_", когда я помещаю внутри (с в отдельной строке)

ProgramBox

«пробел» добавляется автоматически браузером и отображает «_», когда я помещаю внутри (с в отдельной строке)

Post author:admin
Запись опубликована:12 ноября, 2022
Post category:Вопросы по программированию

#html #image #indentation

#HTML #изображение #отступ

Вопрос:

Я использую значок в теге изображения для использования в качестве ссылки на мой LinkedIn, а другой — для моего Github. Каждый значок находится внутри тега привязки.

Когда код выглядит следующим образом:

 <a href="temp.html" target="_blank">
   <img src="linkedinicon.png">
</a>
<a href="https://github.com/victoriensukarieh" target="_blank" title="Github">
   <img src="files/img/githubicon.png" height="30px" width="30px" style="border: none;">
</a>

браузер отображает «_», а в инструменте разработчика он показывает «пробел».

Форматирование кода таким образом решает проблему:

 <a href="temp.html" target="_blank"><img src="linkedinicon.png"></a>
<a href="https://github.com/victoriensukarieh" target="_blank" title="Github">
   <img src="files/img/githubicon.png" height="30px" width="30px" style="border: none;">
</a>

проблему можно увидеть здесь JSFiddle

у кого-нибудь есть какие-нибудь идеи, почему?

Ответ №1:

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

 element.style {
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

На самом деле это не ошибка, но она граничит с ней. В принципе, вы хотели бы переопределить используемый стиль ссылки text-decoration: none; , и это не должно быть проблемой. Возможно, вам потребуется переопределить все состояния, такие как a:visited и a:hover и т. Д…

Решение: <a style="text-decoration: none;">...</a>

1. проблема text-decoration решена, но я все еще не понимаю пробелов. добавление тега изображения в новую строку для украшения моего HTML-кода отображается как пробел?

2. Я не слишком углублялся в это, но технически в коде есть вкладки, новые строки и, возможно, пробелы. Если бы я рискнул предположить, я также думаю, что может быть определенное поведение из-за отсутствия изображения. Я также не тестировал его в разных браузерах (я просто использовал браузер на основе chromium). Кто-то с большими знаниями может прийти, чтобы объяснить детали, но по моему опыту при разработке css / html вы хотите использовать определенный стиль для него, когда видите странное поведение, чтобы он знал, что вы хотите, а не по умолчанию. Я бы не стал слишком беспокоиться об этом, просто создайте класс a.img-link{...}

Ответ №2:

Разве это не стиль подчеркивания привязки по умолчанию?

Просто примените стиль:

 a {
  text-decoration: none;
}

Убедитесь, что этот стиль имеет больший приоритет, чем стиль по умолчанию!

Дополнительная информация: https://www.hongkiat.com/blog/css-priority-level /

Ответ №3:

Это результат действия правил обработки пробелов (https://www.w3.org/TR/css-text-3/#white-space-processing ).

Изображения становятся немного странными с этими правилами , потому что в некоторых отношениях они обрабатываются как inline , а в других — как inline-block . Разрывы строк, табуляции и т. Д. — Это пробельные символы, которые обычно игнорируются или сокращаются, чтобы на элементы веб-страницы не влияло форматирование, которое вы используете, чтобы сделать код читаемым (например, отступы и новые строки, как вы делаете в своем примере). однако здесь происходит то, что правила пробелов для встроенных элементов по существу сворачивают любые области пробелов (группы символов пробелов) до одного пробела вместо его полного удаления.

Одна из причин, по которой это проявляется здесь, заключается в том, что элемент является встроенным элементом, но используется таким образом, который семантически больше похож на блочный или гибкий элемент. Если вы применитесь display:block к a элементу, поведение, вероятно, будет ближе к тому, что вы ищете, но это также будет означать, что вам понадобятся некоторые дополнительные стили компоновки (float, flex и т.д.), Чтобы они снова отображались рядом. Лично, если предполагается, что это будет группа кнопок / ссылок со значками, я бы заключил их в семантически корректный элемент (div, list, nav и т.д.) и применил display:flex к этому новому родительскому элементу.