Фон для текста

[Jake Blues]

Есть проблема, уже даже и не знаю, что еще можно попробовать сделать.

Есть текст, которому нужно задать фон:

html:

<h4><a href="#">Новый алгоритм Google <br> усовершенствуется</a></h4>

css:

h4 a{

color: #fff;

background-color: #ffba00;

}

Должно получиться:

Сразу скажу, что уже перепробовал все свойства дисплэй - все что не строчный элемент, отображается блоком, а тут явно видно, что фон задается строкам. Пробовал задавать значение padding, но у строчных элементов, padding отодвигает начало первой строки (действует как text-indent), что тоже не годится. Пробовал сделать фон через значение outline, но там тоже проблемы. В общем, может у кого-нибудь есть идеи...

Edited November 7, 2012 by Jake Blues

[lexxcode]

Ну все правильно

[Jake Blues]

Что именно правильно? Оо

UPD: Я там не вставил <br>, потому что у меня в макете строка переносится из-за ширины блока, но сути проблемы это не меняет) Все равно расширить сам фон, чтобы он больше выступал со всех сторон, но при этом сохранял свойства как для строчных элементов не выходит.

[lexxcode]

аайй сорри, я не понял про отступы

[andriy.developer]

Если нужно увеличить фон вокруг букв, то можно так:

h4 a{

color: #fff;

background: #ffba00;

padding: 10px; /* регулировать по желанию */

}?

[Jake Blues]

Если нужно увеличить фон вокруг букв, то можно так:

h4 a{

color: #fff;

background: #ffba00;

padding: 10px; /* регулировать по желанию */

}?

Ну вот это как раз и не работает так как нужно, если ссылка переносится на другую строку. Решение подсказал мне мой знакомый, который откопал его в буржуйнете. Может пригодится кому-нибудь.

h4 a {

line-height: 18px;

color: white;

background-color: #FFBA00;

box-shadow: 6px 0 0 #FFBA00,-8px 0 0 #FFBA00;

-moz-box-shadow: 6px 0 0 #FFBA00,-8px 0 0 #FFBA00;

-webkit-box-shadow: 6px 0 0 #FFBA00,-8px 0 0 #FFBA00;

padding: 4px 0;

}

[mrnobody]

Раньше уже где-то на форуме выкладывали эту ссылку http://chikuyonok.ru/2010/01/uniform-text-background/

Edited November 8, 2012 by mrnobody