padding в блоке с текстом

SmilerOFF · June 6, 2009

Подскажите, пожалуйста, что не так делаю? Как исправить?

Мне надо получить блок с определенным текстом, ширина которого зависит от текста внутри него. И должны быть отступы от текста. Получиться должно такое:

В ФФ все нормально, а в ИЕ7 отступы по бокам есть, а сверху и cнизу нет.

Использую такой код для CSS:

.layer{
display: inline;
padding:7px 18px;
background-color:#3d2e1e;
}

Html:

<div class="layer">строка</div>

psywalker · June 6, 2009

убери display: inline;

SmilerOFF · June 6, 2009

Тогда div получается на всю ширину экрана.

AjiTae · June 7, 2009

Простой вариант:

Если возможно, добавить float:left; (right) : тогда блок будет нормально вычислять ширину без всяких display: inline; .

Минусы: собственно float, который может помешать правльному формированию страницы. Вариант решения - заключить в ещё один <div> (впрочем это уже зависит от конкретной ситуации).

Менее красивый вариант: если шрифт чётко заданного размера, то можно добавить line-height: (подобранное значение)px; , лучше если изначально font-size не задан - задать его во избежание недоразумений.

Минусы:

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

2. Надобность чётко задавать размер шрифта, и персонально подбирать line-height к конкретному размеру.

Наверняка есть ещё варианты, подумаю, если этих не хватит.)

Рабочий пример:

<html>

<style>

*

{

padding:0px;

margin :0px;

}

.layer {

display:inline;

padding:7px 18px;

background-color:#ff2e1e;

font-size:16px;

line-height:32px;

}

.layer2 {

padding:7px 18px;

float:left;

background-color:#ff2e1e;

}

</style>

<div class="layer">строка</div>

<br>

<div class="layer2">строка</div>

</body>

</html>

Edited June 7, 2009 by AjiTae

SmilerOFF · June 8, 2009

Огромное спасибо. Оба варианта хорошо подходят.

SelenIT · June 8, 2009

Еще пара вариантов:

- display: inline-block (на данный момент у него есть проблемы с кроссбраузерностью, так что рабочий вариант примерно следующий):

.layer {
display: -moz-inline-box; /* для FF2, может глючить */
display: inline-block;
padding:7px 18px;
background-color:#3d2e1e;
}
* html .layer { /* аналог inline-block для IE6 */
display: inline;
zoom: 1;
}
*+html .layer { /* то же для IE7 */
display: inline;
zoom: 1;
}

- display: table (к сожалению, не поддерживается IE7-, поэтому понадобится тот же фикс, что в примере выше).

Sign In

padding в блоке с текстом

Question

SmilerOFF

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

SmilerOFF

Link to comment

Share on other sites

AjiTae

Link to comment

Share on other sites

SmilerOFF

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information