のサブパラグラフに分割されたテキストの大きなパラグラフがあります<br>。

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

2つの<br>'s'やそのようなものがあるように、これらのサブパラグラフ間のギャップを広げたいです。これを行う正しい方法はを使用すること<p></p>ですが、現時点ではこのレイアウトを変更できないため、CSSのみのソリューションを探しています。

私は設定を試してみた<br>のline-heightとheightでdisplay: block、私はまた、簡単にGoogleで検索し、スタックオーバーフロー-編が、任意の解決策を見つけることができませんでした。これはレイアウトを変更せずに可能ですか？

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;" />

HRを使用してシミュレートされたよりきれいなBRブレークを作成するには：すべてのブラウザーで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で動作します。Explorerでテストしていません。（Windowsタブレットの電源が切れています。）

改行、フォントサイズは、FirefoxとSafariでは動作が異なります。

興味深いことに、breakタグが次のように完全な形式で記述されている場合：

<br></br>

次に、CSS line-height：145％が機能します。ブレークタグが次のように記述されている場合：

<br> or 
<br/> 

その後、少なくともChrome、IE、Firefoxでは機能しません。おかしい！

私にとってうまくいくのは、段落タグの間にこのインラインを追加することです...しかし最善の解決策ではありません

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

--------編集---------

PC / Macでこの問題に遭遇しました...テキストに新しい行の高さが表示されますが、改行は行われません...いくつかのテストを自分で実行したい場合があります。ごめんなさい！

そして<hr>、どこかで提案されているようにタグを（誤って）使用すると、タグが終了する<p>ので、その解決策を忘れてください。
もしf.ex. 周囲<p>で何かのスタイルが設定されている場合、そのスタイルは<hr>が挿入された後、コンテンツの残りの部分ではなくなります。

IE、Firefox、Chromeで機能するソリューションを次に示します。アイデアは、br要素のフォントサイズを14pxの本文サイズから18pxに増やし、追加のサイズがテキスト行の下になるように要素を4px下げることです。結果は、brの下に4pxの余分な空白があります。

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

2019年9月13日更新：

私が使用<br class=big>私は1つを必要とするとき、特大の改行を作成します。今日まで、私は次のようにスタイルを設定しました：

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

（これvertical-align:topはIEとEdgeでのみ必要でした。）

これは、私が試したすべての主要なブラウザー（Chrome、Firefox、Opera、Brave、PaleMoon、Edge、IE11）で機能しました。

ただし、最近ではChromeベースのブラウザで動作しなくなりました。「大きな」改行が通常のサイズの改行に変わりました。

（いつ彼らがそれを壊したか正確にはわかりません。2019年9月12日の時点で、それは私の古い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:topIEと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



2020年5月28日：

デモページを更新しました。ここでは、上記のすべての手法を示します。

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

マイケルとヨーダはどちらも正しい。あなたができることは、<p>タグを使用することです。これはブロックタグであり、下マージンを使用して次のブロックをオフセットするため、これと同様のことを実行して間隔を大きくすることができます。

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

もう1つの方法は<hr>、間隔の高さを明示的に定義できるblock タグを使用することです。

<br />のテキストで満たされた行と同じだけのスペースを取り<p>ますが、変更することはできません。より大きくしたい場合は、段落に分割する必要があることを意味するため、otherを追加し<p>ます。できる限り最もセマンティックになることを忘れないでください;）

CSSで "block-quote"プロパティを使用することもできます。これは、個々の行に影響を与えないようにするためですが、段落間の区切りまたは「ブロック引用」だけのパラメーターを設定できます。

更新：
私は修正された立場です。「blockquote」は実際にはhtmlプロパティです。作業の前後で<p>や</ p>のように使用します。次に、ブロック引用のパラメーターを次のようにcssで設定できます

blockquote { margin-top: 20px }

お役に立てれば。これは、brのパラメーターの設定に似ており、ブラウザー間で互換性がある場合とそうでない場合があります。

あなたはBRの高さを調整することができないようですが、display：noneを使用して確実にそれを消すことができます

次の解決策を探しているときにこのページに行きました。

サードパーティの支払いゲートウェイ（Worldpay）では、テンプレートの本文に挿入されるCSSとHTML（スクリプトは許可されていません）を最大10kにして、いくつかのBRやFONTタグなどを使用して、支払いページのみをカスタマイズできます。 。IE7 / 8を強制モードに強制するDTDと相まって、これにより、クロスブラウザーのカスタマイズが非常に困難になります！

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: "" }

タグを含むタグでCSS line-height属性を使用してみてください。分離したい場合は、タグを使用できることを覚えておいてください。ただし、分離にはIMO を使用する方がよい場合があります。pbridpdiv

他の誰かがすでにこれを言っている場合は申し訳ありませんが、簡単な解決策は、「行の高さ」をいじってみることです。改行を使用するときにスペースが多すぎる場合は、単に行の高さが高すぎるためです。CSSでこれを修正できます（ただし、そのプロパティを使用するすべてに影響することを知っています）、またはインラインスタイルを実行してCSSをオーバーライドできます。

HTMLをPDFに変換するソリューションを開発し、テーブルセルのテキストを垂直方向に中央揃えにする必要がありましたが、プレーンを入力する以外は何も機能しませんでした <br>

そこで、ボックスの外側で考えて、フォントサイズを（pt単位で）調整することで垂直サイズを変更しました。

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

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

あなたはこれをインラインと各
要素で行う必要がありますが、それはほとんどのブラウザで動作するはずです。各要素でインラインにすると、ほとんどのブラウザーと電子メールで機能するはずです（ただし、ここで説明するには複雑すぎます）。

これは、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で動作するようにしましたが、Nigelや他の人が提案したように、主にBrをDIVでラップしました。IDを追加し、at = "server"を実行して、チェックボックスの行からチェックボックスを削除するときにBRを削除できるようにしました。

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

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

2つのbrタグを使用することが、すべてのブラウザで機能する最も簡単なソリューションです。しかし、それは反復的です。

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

そのように改行ではなく段落を追加するのはどうですか

bla la la bla bla abla la la bla bla abla la la bla bla a

次に、そのpの行の高さやパディングなどを指定できます