-4

これが私の以前の質問の別の例です。

pタグの間に2行の空白行を入れることは不可能ですか? マークダウン

いろいろなコメントをいただいた後、私はそれを管理できると思っていました。

実際、私にはできません。

--------

br

--------
あ
B
--------

pタグ


--------

あ

B

--------

さて、元の要素を変更せずに、A 要素と B 要素の間に 1 行ではなく 2 行を挿入したいと思います。

私が期待する結果はこのようなものです（brエミュレーション）


--------

あ


B

--------

pタグでやってみる


--------

あ

 

B

--------

痛い!! 2行ではなく3行挿入。

それで、HTMLとCSSでこれを行う方法はありませんか??

コード: http://jsfiddle.net/LhDFs/9/

--------<br>
## br<br>
--------<br>
A<br>B
<br>--------<br>
## p tag
<br>--------
<p>A</p>
<p>B</p>
--------<br>
## OK, now, I want to insert 2 lines instead of 1 between A and B elements without any modification of the original elements;<br>
## The result I expect is like this (br emulation)
<br>--------<br>
    <br>
A<br><br><br>B
    <br>
<br>--------<br>
## trying with p tag 
<br>--------<br>
<p>A</p>
<p style = 'margin: 0;'>&nbsp;</p>
<p>B</p>
--------<br>
## Ouch!! 3 lines inserted instead of 2.
<br> ## so, is there no way to do this by HTML and CSS??

編集: HTML に対する私の理解が未熟であると言う人もいますが、それを否定するつもりはありません。ただし、人々が言っ​​たことは HTML 制限に関するものです。

わかりやすくするために、これは HTML+js コーディング用であり、静的ではありません。したがって、元の要素を変更せずに、 A 要素と B 要素の間に 1 行ではなく 2 行 (または任意の数) を挿入したいと思います。

機能は元のコンテキストを変更することではなく、空白行を挿入することだからです。私が意図しているのは、ものを挿入することです。ものを挿入するとき、元のコンテキストを変更する必要がある場合は、より複雑で、通常はうまくいきません。ですから、元の要素の間に正確な線を挿入することが本当に不可能な場合は、元のコンテキストを変更することをあきらめて混乱させました。私が知りたいのは、それが可能か不可能かということです。

それが本当に不可能な場合は、コードを渡す代わりにそう言ってください。

ありがとうございました。

編集：

デフォルトの段落タグ コンテキストが存在する限り、正確な行を挿入することはできないと結論付けています。

したがって、代わりに、コンテキスト全体を「noMargin」段落タグで構築する必要があります。

http://jsfiddle.net/LhDFs/10/

<p class="noMargin">No margin</p>
<p class="noMargin">&nbsp;</p>
<p class="noMargin">&nbsp;</p>
<p class="noMargin">No margin</p>

CSS

p.noMargin {
    margin: 0;
}　

または単に

<p>No margin</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>No margin</p>

CSS

p{
    margin: 0;
}　

クレジットは

@3dgoo

<p> タグの間に 2 行の空白行を入れることはできませんか? マークダウン

皆様ありがとうございました。私の投稿で不快な思いをされた方がいらっしゃいましたら、お詫び申し上げます。

4

4 に答える 4

1

正しいやり方を紹介します。これは、理解、改善、および将来の変更が非常に簡単です。

http://jsfiddle.net/techsin/FDK7P/

ああ、cssはjavascriptではありません

cssコード.double-space {margin-top:2em;}は、クラス属性を、ダブルスペースが必要な段落に適用します。しかし、疑似セレクターを使用して最初に行った方法でそれを行いたい場合は、問題ありませんが、より多くの作業と非効率的です。

しかし、それを別の方法で行う方法はあります...

http://jsfiddle.net/techsin/FDK7P/1/

最初の方法をお勧めします...下の写真を見てください

デフォルト証拠金

灰色の Css スタイルは、ブラウザによって自動的に適用されます/デフォルト値

またはブロック要素。

したがって、変更したい段落に対して1emから2emを作成します。これはデフォルト値の 1em を上書きします。ここに画像の説明を入力

于 2013-08-02T05:58:43.400 に答える
0

これらのいずれかのようにスタイリングしてみてください

<p style="margin-bottom: 10px;">text</p>
<p style="line-height: 200%;">text</p>

現在のフォント サイズのパーセントで表した行の高さ

于 2013-08-02T03:59:18.480 に答える
0

わかりました、html の基本に戻りましょう。おそらく役に立ちます!

まずapタグはインライン要素を含むブロック要素です。
ここの短いチュートリアル: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

つまり、p は段落、br は改行を意味します。実際、コンテンツを段落で分割し、改行で行を変更する必要がある場合があります。したい場合は、次のように言いましょう。

テキストA


テキストB

次に、2 つの異なる段落が必要です。

<p style="margin-bottom: 1em;">text A</p>
<p>text B</p>

（わかりました、cssをインラインではなく別のファイルに入れます）

マージンは他の段落を押します。改行の場合は、次のようになります。

テキストA
テキストB

<p>text A<br>text B</p>

段落全体を保持しますが、改行します。

css の p に margin-bottom を適用すると、すべての段落が同じ距離になります! Word のノーマル、ヘッダー 1、ヘッダー 2 などのスタイルのように、前後の余白を決めることができます。

それが役に立てば幸い！

編集：

あなたはJavascriptでそれを行うことができます、または私はそのようにjQueryを使用することを好みます
:

$('p').each(function() {
    var $this = $(this);
    if ($this.html() == '&nbsp;') {
        $this.remove();   
    }
});

たとえば、正規表現を使用できます。間に完全な段落が追加されるため、非改行スペースを含む p タグを削除しました。2つの異なる段落を保持して、いくつかのマージンを置き、cssですべてを制御するのが簡単になるようにします（答えの一番上で言ったように。間に br または p を追加しようとしないでください。マージン！）。br では、2 行をスキップするには 3 br が必要です。

それはあなたが必要とするものですか？そうでない場合は、もっと明確にしてください！

于 2013-08-02T04:00:41.667 に答える