Styling <u> теги

Question

Я уже посетил это: How to increase the gap between text and underlining in CSS, но мой подход использует теги. ОП в вышеуказанном вопросе использует css text-decoration:underline подходы при условии, что существуют разные

У меня есть заголовок, который подчеркивается на моей веб-странице.

<h1><u>Hello</u></h1> 

Но разрыв между текстом и подчеркиванием мал, поэтому я попытался это:

u 
{ 
    padding-top:10px; 
} 

и это:

u 
{ 
    margin-top:10px; 
} 

Но разрыв между текстом и подчеркивание все такой же. Любая идея, как я могу увеличить разрыв?

Answer 1

Попробуйте это решение:

u { 
 
    padding-bottom:10px; 
 
    text-decoration:none; 
 
    border-bottom:3px solid #000; 
 
}

<h1><u>Hello</u></h1>

Проблема пути нахождения решения является то, что u элемент использует text-decoration для нижней границы. Эта граница не может быть перемещена, поскольку она находится в тексте. Решение состоит в том, чтобы удалить текстуру для этого и добавить собственную границу внизу. Теперь вы можете увеличить пространство между содержимым h1 и границей с padding-bottom.

Если вы хотите использовать элемент u на других элементах normaly, вы должны написать h1 u на свой CSS.

Answer 2

Тег <u> устарел в HTML 4 и XHTML 1, но он был повторно введен в HTML5 с другой семантикой.

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

<h1><span class="underline"><span>Hello</span></span></h1> 

span.underline{ 
padding-bottom:3px; 
border-bottom:3px solid black; 
} 

Вы могли увеличить разрыв между текстом и подчеркиванием путем изменения padding-bottom

Answer 3

<h1><a>Hello</a></h1> 

a 
{ 
vertical-align: top; 
border-bottom-width: 2px; 
border-bottom-style: solid; 
text-decoration: none; 
padding-bottom: 2px; //You can adjust the distance here. 
} 

http://jsfiddle.net/74vn0shc/