У мене великий абзац тексту, який розділений на підпункти з <br>'s:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

Я хочу розширити розрив між цими підпунктами, начебто два <br>чи щось подібне. Я знаю, що правильний спосіб зробити це - використовувати <p></p>, але зараз я не можу змінити цей макет, тому я шукаю рішення, яке стосується лише CSS.

Я спробував налаштувати <br>'s line-heightand heightwith display: block, я також коротко зіткнув Google і Stack Overflow-ed, але не знайшов рішення. Це можливо навіть без зміни плану?

Css:

br {
   display: block;
   margin: 10px 0;
}

Рішення, ймовірно, не сумісне між браузерами, але принаймні щось є. Також врахуйте налаштування line-height:

line-height:22px;

Для Google Chrome врахуйте налаштування content:

content: " ";

Крім цього, я думаю, що ви застрягли з рішенням JavaScript.

Ось правильне рішення, яке насправді має підтримку крос-браузера:

  br {
        line-height: 150%;
     }

Отже, заглянувши вище, в основному є аналогічна відповідь, але тут це дуже коротко. Працює в Opera, Chrome, Safari та Firefox, імовірно, IE теж?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Інший спосіб - це використання HR . Але, і ось ось хитра частина, зроби його невидимим.

Таким чином:

<hr style="height:30pt; visibility:hidden;" />

Щоб зробити більш чистий перерва BR, змодельований за допомогою HR: Btw працює у всіх браузерах !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Наскільки я знаю , <br>НЕ має висоту, вона просто змушує розрив рядка. У вас є текст з деякими розривами рядків на додаток до автоматичного обгортання, а не підпунктів. Ви можете змінити міжрядковий інтервал, але це вплине на всі рядки.

У мене просто була ця проблема, і я її вирішив, використовуючи

<div style="line-height:150%;">
    <br>
</div>

Ви можете застосувати висоту лінії до цього <p>елемента, щоб лінії стали більшими.

Я раніше не пробував псевдоелемент :before/ :afterCSS2, в основному тому, що він підтримується лише в IE8 (це стосується браузерів IE) . Це може бути єдине можливе рішення CSS:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Ось приклад на QuirksMode .

У мене була думка, яку ви можете використовувати:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

Але це не працювало на хромі або firefox.

Просто подумав, що згадаю, що, якщо трапиться хто-небудь інший, я врятую їм неприємності.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Працює у Firefox, Chrome та Safari. Не перевірений у Провіднику. (Планшет Windows не має сили.)

У Firefox & Safari розмір шрифту працює по-різному.

Цікаво, що якщо тег перерви записаний у повному вигляді так:

<br></br>

то висота рядка CSS: 145% працює. Якщо тег перерви записується так:

<br> or 
<br/> 

то це не працює, принаймні в Chrome, IE та firefox. Дивно!

Що для мене працює - це додавання цього рядка між тегами абзацу ... хоча не найкраще рішення.

<br style="line-height:32px">

-------- Редагувати ---------

Я зіткнувся з проблемами з PC / Mac з цим ... Це надає тексту нову висоту рядка, але не робить розрив рядків ... Можливо, ви хочете зробити кілька тестів самостійно. Вибачте!

І пам’ятайте, що (неправильно) використання <hr>тегу, як запропоновано десь, закінчиться <p>тегом, тому забудьте про це рішення.
Якщо f.ex. щось стилюється на оточуючих <p>, цей стиль пішов для решти вмісту після <hr>вставки.

Ось рішення, яке працює в IE, Firefox та Chrome. Ідея полягає в тому, щоб збільшити розмір шрифту елемента br з розміру тіла 14 пікселів до 18 пікселів і зменшити елемент на 4 пікселя, щоб додатковий розмір був нижче рядка тексту. Результат - 4 пікселя додаткового пробілу нижче рівня.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

ОНОВЛЕНО 13 вересня 2019 року:

Я використовую <br class=big>для того, щоб зробити велику розрив лінії, коли мені потрібна. До сьогоднішнього дня я стилізував це так:

br.big {line-height:190%;vertical-align:top}

( vertical-align:topПотрібно було лише для IE та Edge.)

Це працювало у всіх основних браузерах, які я спробував: Chrome, Firefox, Opera, Brave, PaleMoon, Edge та IE11.

Однак останнім часом вона перестала працювати в браузерах на базі Chrome : мої "великі" перерви в рядках перетворилися на звичайні розміри.

(Не точно знаю, коли вони зламали його. Станом на 12 вересня 2019 року він все ще працює у застарілому Chromium Portable 55.0.2883.11, але він зламаний в Opera 63.0.3368.71 та Chrome 76.0.3809.132 (обидва Windows та Android).)

Після деяких проб і помилок я закінчив наступний замінник, який працює в поточних версіях усіх цих браузерів:

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

Примітки:

line-height:190% працює у всьому, окрім останніх версій веб-переглядачів Chrome.

vertical-align:topпотрібен IE та Edge (у поєднанні з line-height:190%), щоб отримати додатковий простір після попереднього рядка, куди він належить, а не частково до і частково після.

display:block;content:"";margin-top:0.5em працює в Chrome, Opera та Firefox, але не в Edge & IE.

Альтернативний (простіший) спосіб додавання трохи додаткового вертикального простору після <br>тегу, якщо ви не заперечуєте проти редагування HTML, - це щось подібне. Це добре працює у всіх браузерах:

<span style="vertical-align:-37%"> </span><br>

(Ви, звичайно, можете коригувати "-37%" за потреби для збільшення або меншого розриву.) Ось демонстраційна сторінка, яка включає деякі інші варіанти теми:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 травня 2020 року:

Я оновив демонстраційну сторінку; Тепер він демонструє всі перераховані вище методи:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Майкл та Йода мають рацію. Що ви можете зробити, це використовувати <p>тег, який, будучи тегом блоку, використовує нижнє поле для зміщення наступного блоку, так що ви можете зробити щось подібне до цього, щоб отримати більший інтервал:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Інша альтернатива - використовувати <hr>тег блоку , за допомогою якого можна чітко визначити висоту міжряддя.

<br />займе стільки місця, скільки заповнений текстом рядок <p>, ви не можете змінити це. Якщо ви хочете збільшити розмір, це означає, що ви хочете розділити їх на абзац, тому додайте інші <p>. Не забувайте бути найсемантичнішим, що ви можете;)

ви також можете використати властивість "block-quote" у CSS. Це зробило б це таким чином, що воно не впливає на ваші окремі рядки, але дозволяє встановлювати параметри для просто перерв між абзацами або "блокувати лапки".

ОНОВЛЕННЯ:
Я виправлений. "blockquote" - це власне html-властивість. Ви використовуєте його так само, як <p> і </p> навколо своєї роботи. Потім ви можете встановити параметри для блокової цитати в css like

blockquote { margin-top: 20px }

Сподіваюсь, це допомагає. Це аналогічно встановленню параметрів на br і може бути, а може і не бути сумісним для браузера.

Здається, ви не можете регулювати висоту BR, але ви можете змусити його надійно зникати, використовуючи дисплей: жоден

Переходив на цю сторінку, шукаючи рішення для наступного:

У мене ситуація, коли сторонній платіжний шлюз (Worldpay) дозволяє лише налаштувати їхні платіжні сторінки з 10-макс. CSS та HTML (сценарій не дозволений), які вводяться в тіло їх шаблону, а після декількох тегів BR, FONT тощо У поєднанні з DTD, який змушує IE7 / 8 переходити в режим Quirks, це робить налаштування крос-браузера настільки ж важким, наскільки це стає!

Якщо вимкнути BR, це робить речі набагато послідовнішими ...

Я використовую ці методи, але я не знаю, чи крос-браузер

================= Спосіб 1 ===================

br {
    display:none;
}

АБО

================= Спосіб 2 ===================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

АБО

================= Спосіб 3 ===================

br:after { content: "" }
br { content: "" }

Спробуйте використати line-heightатрибут CSS у своєму pтезі, який містить brтег. Пам'ятайте , що ви можете idсвої pтеги , якщо ви хочете , щоб ізолювати його, хоча це могло б бути краще , використовуючи divдля ізоляції, ІМО.

Вибачте, якщо хтось уже сказав про це, але просте рішення - це пограти зі своєю "висотою лінії". Якщо ви отримуєте занадто багато місця під час використання розриву лінії, це просто тому, що висота лінії встановлена ​​занадто високою. Ви можете виправити це в CSS (але знайте, що це вплине на все, що використовує цю властивість) або ви можете зробити стиль вбудованої форми, щоб замінити CSS.

Мені довелося розробити рішення для перетворення HTML у PDF та вертикального центрування тексту у комірках таблиці, але нічого не вийшло, крім введення простої <br>

Отже, думаючи поза рамкою, я змінив розмір вертикалі, регулюючи розмір шрифту (в пт).

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

Ви повинні зробити це в рядку та на кожному
елементі, але він повинен працювати в більшості браузерів Fiddle з висотою лінії, щоб отримати бажаний ефект. Якщо зробити його вбудованим на кожному елементі, він повинен працювати в більшості браузерів та електронної пошти (але це занадто складно для обговорення тут).

Це зробило трюк для мене, коли мені не вдалося отримати інтервал стилів для роботи з тегу span:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

Використовуйте <div>

<div>Content 1</div>Content 2

Це дозволяє створити нову лінію без вертикального пробілу.

Це стає

<div>Content 1</div>Content 2

Відповідь на більш загальному рівні для тих, хто приземлився сюди, коли вони виправляють проблеми в інтервалі, викликаному <br>тегом. Мені доводиться робити багато скидів, щоб наблизитися до ідеального пікселя.

br {
    content: " ";
    display: block;
}

Для конкретного питання, з яким я звертався, мені довелося мати певний пробіл між рядками. Я додав поля вгорі і внизу.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

Я змусив його працювати в IE7 за допомогою комбінації рішень, але в основному загортаючи Br в DIV, як пропонували Найджел та інші. Додано ідентифікатор і запустіть на = "server", щоб я міг видалити BR при видаленні прапорця з рядка прапорців.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Можливо використання двох тегів br - це найпростіше рішення, яке працює з усіма браузерами. Але це повторюється.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Як щодо просто додавання абзацу замість розриву рядка так

бла-ла-бла-бла-абла-ла-ла-бла-бла-абла-ла-ла-бла-а

Потім ви можете вказати висоту лінійки або обшивку або будь-яку іншу для цього стор