Интервал между двумя строками , CSS

[Jin X]

Нужно увеличить интервал между двумя строками. Если делать line-height: 150%, то как следует из названия этого свойства, увеличивается высота обеих строк, т.е. если вокруг строк есть граница (border), то эта граница отодвинется вверх от верха первой строки и вниз от низа второй. Мне же нужно тупо увеличить расстояние между строками. Сделал вот так:

<div style="margin-bottom: 8px;">Первая строка</div>Вторая строка

Но, сдаётся мне, можно как-то красивее это реализовать... Я прав?

[Serafim]

div - это блочный элемент, так что однозначно нет. Более верно будет использовать span и уже в нём указывать line-height

[Jin X]

Я же уже говорил про line-height: он будет раздвигать верхнюю и нижнюю границы (условно говоря, padding-top и padding-bottom).
div работает как надо, но возможно есть более красивый вариант.

[Serafim]

Цитата Jin X @ 06.07.15, 14:24

красивый

Цитата Serafim @ 04.07.15, 17:20

Более верно будет использовать span

А дальше со всеми паддингами. Других вариантов, кроме (первый чар - :first-letter, и первая строка - :first-line) нету.

[Jin X]

Цитата Serafim @ 06.07.15, 15:30

Других вариантов, кроме (первый чар - :first-letter, и первая строка - :first-line) нету.

Не понял, как этим пользоваться применительно к конкретному id или классу:

#promo_codebox {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 1000000;
    background: #400;
    padding: 10px 12px;
    border: 2px solid #fc0;
    border-radius: 4px 4px 4px 4px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 13pt;
    color: #fff;
}

Вот как здесь сделать первую строку с margin-bottom: 6px; ?

Добавлено 06.07.15, 16:19
Ну или padding-bottom.

Добавлено 06.07.15, 16:21
Понятно... magrin и padding там не поддерживается, только так:

#promo_codebox::first-line {
    line-height: 200%;
}

Но опять же, те же проблемы...

[Serafim]

паддинг вроде должен срабатывать он для любых элементов прокатывает. Но если нет, для first-line добавь display: inline-block, тогда точно будет всё работать, включая ширину и высоту даже.

[Jin X]

Вот так?

#promo_codebox:first-line {
    display: inline-block;
    padding-bottom: 16px;
}

Не пашет...

[Serafim]

да, ты прав, какой-то левак с этой first-line. Вот такой хак работает: http://jsbin.com/hurodolaxi/1/edit?html,css,output

[Jin X]

Проще через div

[K313]

Цитата Jin X @ 07.07.15, 18:12

Проще через div

если длина первой строки не меняется

[Serafim]

Цитата Jin X @ 07.07.15, 18:12

Проще через div

Через span

Добавлено 08.07.15, 02:05
строка - это инлайновый (текстовый), а не блочный элемент (квадрат)

[Jin X]

K313, о чём ты?

Serafim, каким образом ты хочешь увеличить интервал через span?
span не работает!!! div работает. Сам попробуй...

[Serafim]

Цитата Serafim @ 06.07.15, 18:17

display: inline-block

Добавлено 13.07.15, 11:50
предрекая вопросы "накуя" - о семантике забочусь

[Jin X]

А чем вариант

<span style="display: inline-block; margin-bottom: 8px;">Первая строка</span><br />Вторая строка

лучше варианта:

<div style="margin-bottom: 8px;">Первая строка</div>Вторая строка

???

Добавлено 13.07.15, 12:26
Если работают одинаково...

[Serafim]

Цитата Serafim @ 13.07.15, 11:41

предрекая вопросы "накуя" - о семантике забочусь

[Jin X]

Мне не понятен такой ответ
Чем это лучше и где тут забота?

[Serafim]

Цитата Serafim @ 08.07.15, 02:04

строка - это инлайновый (текстовый), а не блочный элемент (квадрат)

Спан - это тоже инлайновый элемент. Плюс не забываем про стандарты, где явно говорится, что нельзя встраивать блочные элементы в инлайновые (я хз что у тебя там раньше, так что лучше перестраховаться). Плюс доступность (например для устройств экранного чтения), плюс поисковая оптимизация (это текст, а не блок, значит расценивать вместе), плюс... Просто эстетически накрайняк.

[K313]

Цитата Jin X @ 13.07.15, 10:52

K313, о чём ты?

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

[Jin X]

Цитата K313 @ 13.07.15, 16:11

они обе будут отступать от последующего текста.

Ну, так это наоборот хорошо

Добавлено 13.07.15, 17:50
Главное - не первую _физическую_ строку отделить от всего остального текста, а первую смысловую, т.е. первую часть текста.

[K313]

Цитата Jin X @ 13.07.15, 17:50

Главное - не первую _физическую_ строку отделить от всего остального текста, а первую смысловую, т.е. первую часть текста.

Ок! просто вы мутили там что то с first-line, вот я и подумал...

Ну а так, может Вам не мух нужно от катлеты отодвигать, а взять всюкотлету и сдвинуть её пониже? например заключив в тег <p>...</p>

[Jin X]

Есть один текст и есть другой, между ними должен быть интервал. Так что, мухи выше, котлеты ниже