Ответ 1
border-bottom
помещает строку внизу поля элемента. text-decoration:underline
подчеркивает текст. Точная разница зависит от используемых HTML и текстовых макетов, но в целом, если вы хотите подчеркнуть текст, а затем подчеркните его.
В чем отличие использования {text-decoration: underline}
и {border-bottom: ...}
?
который легко стилизован и совместим с браузером?
когда мы должны использовать border-bottom
над text-decoration: underline
?
Хорошо ли использовать border-bottom
вместо text-decoration: underline
?
border-bottom
помещает строку внизу поля элемента. text-decoration:underline
подчеркивает текст. Точная разница зависит от используемых HTML и текстовых макетов, но в целом, если вы хотите подчеркнуть текст, а затем подчеркните его.
Прошу прощения, но некоторые ответы здесь вводят в заблуждение. Разделение строки текста не помещает границу в нижней части всего блока из-за характера встроенных блоков. Границы под ссылками на самом деле более согласованы между браузерами, чем текстовое оформление: подчеркивание.
Смотрите: Text-Decoration vs. Border-Bottom
Как сказал Игнасио, border-bottom
поместит строку в нижнюю часть содержащего окна, тогда как text-decoration:underline
действительно подчеркнет текст. Это становится важным отличием для многострочных строк.
I am a single line and will look similar for both methods
---------------------------------------------------------
вероятно, сделает то же самое для обоих стилей, но вы получите следующее для многострочных строк.
I am a string that has been
split and added a border-bottom
-------------------------------
I am a string that has been
---------------------------
split and underlined
--------------------
Извините за использование форматирования кода, а не за правильное разграничение этих примеров, но вы можете увидеть, что я пытаюсь сделать.
bottom-border
позволяет вам управлять расстоянием между текстом и подчеркиванием, поэтому он более универсален. И (как упоминалось выше), он позволяет использовать другой цвет для подчеркивания (хотя я не вижу причины, почему вы захотите это сделать).
text-decoration
является более "правильным", потому что это "реальное" свойство CSS, предназначенное для подчеркивания текста.
если вы установили text-decoration: underline
для всех ссылок, вам нужно будет установить text-decoration: none
для специальных ссылок, для которых вам не нужна подчеркивание. но если вы используете border-bottom вместо этого, вы сохраните одну строку CSS-кода (укажите, что вы установили text-decoration: none
в свой reset CSS.
Итак, в целом, я проголосую за border-bottom
, если у вас сложный макет с разными стилями для каждой ссылки, но text-decoration
для простого веб-сайта, закодированного "по книге".
чтобы ваш текст отображался в строке (на самом деле это должно быть по умолчанию) приведет к тому, что border-bottom будет отображаться как правило редактирования текста.
однако я предполагаю, что вы хотите использовать эту технику в ссылках, выполнив следующие действия:
/* my super eye catching dual colour link */
a {
color:black;
border-bottom:1px solid red;
}
который все хорошо и хорошо, но вы обнаружите, что везде, где у вас есть тег img внутри ссылки, изображение будет иметь красную рамку под ним.
если вы можете определить способ нацеливания родителя элемента страницы (изображения) с помощью существующих селекторов и без javascript, я куплю вам пиво, но я не думаю, что вам повезет.
использование "text-decoration" позволяет избежать этой проблемы вообще, поскольку изображение явно не является текстом, оно не будет отображать подчеркивание, когда внутри ссылки.
если у вас есть полный контроль над вашей разметкой, я предполагаю, что вы можете пропустить свой путь путем добавления классов к каждой ссылке, но если вы работаете с любой популярной системой CMS, вы будете бороться с этой идеей.
Попробуйте эту границу с изображением 1px
a:hover {
background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
background-color: transparent;
background-image: url("img/bg-link-hover.png");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0px 92%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}
Хотя всегда есть случаи, когда один из них более уместен, чем другой, border-bottom
предлагает гораздо более точный контроль над text-decoration
и поэтому, вероятно, является предпочтительным методом. Здесь быстрый (вероятно, не исчерпывающий) список свойств, которые border-bottom
может управлять/включать, что text-decoration
не может:
Во многих случаях большинство этих способностей не понадобятся - но хорошо иметь их в наличии! Я переключился на использование border-bottom
в первую очередь для возможности поместить несколько пикселей отступов между текстом и подчеркиванием; следующее наиболее распространенное использование, которое я нашел, - это разведение цвета подчеркивания из цвета текста.
Теперь, когда переменные CSS теперь отправляются в каждом крупном браузере, таблица стилей "reset" может выглядеть примерно так:
:root {
--link-color: blue;
--hover-color: purple;
--underline-color: var(--link-color);
}
a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--underline-color);
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
Таким образом, ссылки будут отображаться так, как ожидалось, на основе "по умолчанию", но при этом по-прежнему позволяют настраивать.