CSS отступ текста во врезке

MrDesigner
На сайте с 31.01.2008
Offline
145
278

Помогите, плз, грамотным решением.

Есть врезка. Код:

.relinking {

background: none repeat scroll 0 0 #faf5f1;
border-top: 1px dashed rgba(0,0,0,0.2);
border-bottom: 1px dashed rgba(0,0,0,0.2);
color: rgba(0,0,0,0.5);
font-size: 15px;
padding: 20px;
position: relative;
margin: 4% auto;
min-height: 48px;
}

.relinking:before {
font-family: FontAwesome;
content: "\f05a";
font-size: 48px;
font-style: normal;
float:left;
line-height: 1.0;
margin-right: 3%;
color: rgba(200, 200, 200, 0.5);
}

Как правильно задать отступ текста с левой стороны - см. скриншот, где стрелка. Текст должен быть выровнен по голубой линии.

Тогда, так понимаю, код в .relinking:before margin-right: 3%.

Да, в CSS чайник. ))) Спасибо.

png Screenshot-01.png
S
На сайте с 30.09.2016
Offline
459
#1

padding-left: 90px;

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
IL
На сайте с 20.04.2007
Offline
412
#2

На заметку.. Убрать обтекание можно так:

http://xiper.net/collect/html-and-css-tricks/content/overflow-and-orphans

MrDesigner
На сайте с 31.01.2008
Offline
145
#3
Sitealert:
padding-left: 90px;

Сдвигается иконка (i) вправо вместе с остальным тектстом. Иконку хотелось бы оставить на месте.

---------- Добавлено 07.09.2019 в 07:34 ----------

ivan-lev:
На заметку.. Убрать обтекание можно так:
http://xiper.net/collect/html-and-css-tricks/content/overflow-and-orphans

Нельзя вводить ещё один класс div.

Внутри

div class='relinking'

можно оставить иконку на месте, а тексту задать отступ слева?

IL
На сайте с 20.04.2007
Offline
412
#4
Сдвигается иконка (i)

Можно для иконки отрицательный margin-left прописать.

MrDesigner:
Иконку хотелось бы оставить на месте.

Из решения по ссылке.. добавки в блоки: ( IE6-совместимо 😂 )

.relinking:before {
float: left; /* задаем обтекание */
margin:10px; /* отступ для красоты */
display:inline; /* для IE6, чтоб отступ слева не удвоился */
}
.relinking {
overflow:hidden;
}
* html .relinking {
float:left;
}
MrDesigner
На сайте с 31.01.2008
Offline
145
#5
ivan-lev:
Можно для иконки отрицательный margin-left прописать.

Да, отрицательный отступ помог! Ещё раз - всем спасибо.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий