4

CSS の「マージン」と「パディング」は、垂直の段落間のスペースにどのように使用する必要がありますか。

  • パディングやマージンを使用して、段落間の垂直方向のスペースを定義できますか?
  • どちらでも実行できる場合、どちらを使用するのがより良いか、より一般的ですか?
  • ゼロ以外のパディングとゼロ以外のマージンを定義する傾向がありますか? もしそうなら、それぞれの量はどれくらいですか?

マージン、パディング、ボーダーの例では、マージンとパディングの違いが理論的に説明されています。通常の見栄えの良いページをレンダリングするために、実際にそれぞれをどれだけ使用するか疑問に思っています。

次に、次のようなマークアップを指定すると...

<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>

各段落および/またはリスト項目間の垂直方向のスペースを等しくしたい場合は、次のようにします。

  • <ul>独自のマージン + パディングがゼロであると定義する傾向がありますか?
  • または、<ul>通常はゼロ以外のマージンを持ちますが、このマージンはその<li>中の のマージンと<p>それに先行する のマージンで折りたたまれるため、効果はありませんか?

3 番目に (そして、この 3 番目の質問をするべきかどうかはわかりません)、マージンの縮小に関する仕様には、「ボックスの上部と下部のマージンが隣接している場合、マージンがそれを介して縮小される可能性があります」と記載されています。真ん中に次のような空の段落がある場合...

<p>Hello</p>
<p></p>
<p>World</p>

...次に、これが空の段落として表示されることを期待します。つまり、 と の間に余分な垂直スペースがHelloありますWorld。

  • この空の段落の余白が崩れて、空の段落が見えなくなるのを防ぐにはどうすればよいでしょうか。これを行うのはゼロ以外のパディングですか?
  • ボックスが隣接する上マージンと下マージンを折りたたむと便利なシナリオはどれですか?

これら 3 つの質問のいずれかまたはすべてに対する回答を歓迎します。

現時点では、IE 固有のボックス モデルの問題には特に関心がありません。代わりに、標準の使用方法について知りたいのです。

4

4 に答える 4

3

最初の質問に答えるには、通常、マージンまたはパディングを使用して要素間に間隔を追加するかどうかは問題ではありませんが、要素に境界線を適用し、パディングを使用してスペースを作成すると、境界線がそこまで押し出されます。

2番目の問題に答えるには、このコードを見て、いろいろ試してみてください。

<html>
<head>
<title>Box Model Tests</title>
<style type="text/css">
/* Just to get rid of the annoying padding/margin setting that is default
 in most browsers on the body tag from messing up our experiments */
body{
margin: 0px;
padding: 0px;
}
p{
margin: 0px;
padding: 0px;
}
/* It appears that if you modify the ul padding it tends
 to remove the bullet points, that is if you set the paddign to zero */
ul{
margin: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
</body>
</html>

上記の例では、残りのスペースはすべてフォントのプロパティに関係していることに注意してください。これは、他の要素と同じ方法を使用して変更できます。

そして3番目に：

'garrow'は空っぽについて正しいと思いますが、レイアウトでの<p> 使用が少なくなるにつれてこの問題に遭遇することはあまりありませんが、この記事は非常に興味深く見え、W3Cよりも優れた説明を提供すると思います。<p>

于 2009-02-20T08:11:06.473 に答える
2

3番目の質問に答えるには;

空のブロック レベル要素としての 2 番目の < P > は、単純にレンダリングされません。

要素に高さまたはパディングを指定するか、改行しないスペースを含めることで、空の要素を強制的にレンダリングできます  パラの中に。（おそらくこれを行う方法は他にもあります）。
通常の空白 (改行、タブ、スペースなど) は、この点では機能しないようです。

編集 #2 :: これがどのように機能するかを適切に説明するために、これをローカルに保存し、何がレンダリングされるかを確認します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Page Title</title>
        <style type="text/css" media="screen">
            p { margin:10px; background-color:#ccc;}
            p.padding { padding:5px; background-color:#eec; }
            p.height { height:30px; background-color:#cee; }

        </style>
    </head>
    <body>

        <p>text</p>
        <p class="padding">i have padding</p>
        <p class="padding"></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p>5 empty paragraphs before this, only one will render. (it has padding)</p>
        <p>& nbsp;</p>
        <p>     </p>
        <p>     </p>
        <p>





        </p>
        <p>3 whitespace before me, one will render, it has &amp;nbsp;</p>
        <p class="height">im 30 px high</p>
        <p class="height"></p>
        <p></p>
        <p></p>
        <p>3 empty before me, 1 will show (it has height)</p>
        <p>text</p>
        <p>text</p>

    </body>
</html>
于 2009-02-20T07:53:59.230 に答える
0

うーん、まあ... Web ブラウザは違います。Firefox でうまくいくものは、通常、標準でもうまくいくと思いますが、それも完全に真実ではありません。

xhtml1-strict.dtd によると、<li/> のみが <ul/> の子になることができます。規格を熟知しているデザイナーに依頼することをお勧めします。これらは、HTML を検証できる正式な仕様です。

<p>Paragraph.</p>
<ul>
    <li>List item.</li>
    <li>Another list item.
    <p>List paragraph.</p> <!--illegal here-->
    </li>
</ul>

しかし、あなたの質問に戻ります（ちなみに、これは答えるのが面倒です）。ゼロ以外のマージンとパディングを定義する場合が多くあります。パディングが必要ない場合は追加のマージンを好む傾向があり、マージンが機能しない場合はパディングします。状況はそれぞれ異なり、どのような状況が好まれるかを知る必要があります。

ここで正しい軌道に乗っていると思うので、詳細には触れません。実験を続けてください。ただし、Web ブラウザによって動作が異なることに注意してください。

マージンの崩壊についてはわかりませんが、空白がマージンとしてカウントされることがあります。要素の間に空白がない場合、空白がない場合とは異なる場合があります。

繰り返しますが、取り入れなければならないことが多いので、詳細には触れませんが、これらのことについて知っておく必要があり、実践することでこの知識を得ることができます。

デフォルトでは、段落とリストの余白はクロス ブラウザーと同じではありません。すべてのレイアウトを開始するときは、ページの基本 CSS ルールのセットを定義する必要があります。また、設定する余白についてのヘルプが必要な場合は、ページ構成の規範を参照することをお勧めします。

p { margin: 1em 0; }
ul { margin: 1em 0; }
ul > li { margin: 1em 0; }

上記のルールは単なる例ですが、ブラウザに関係なく、段落とリスト項目の上端と下端の余白が同じであることを保証します。このようなことが原因で、ページが同じクロス ブラウザーに見えるようになります。

テストを続け、優れた CSS ブログを読んでください。本当にあいまいなエッジケースに遭遇したときは、助けを求めてください。これらの人々は解決に多くの時間を費やしてきました。あなたの時間は、車輪を再発明するよりも、彼らがどのように解決したかを学ぶことに費やされたほうがよいでしょう。

于 2009-02-20T07:30:06.057 に答える
0

あなたが知る必要がある主なことは、隣接する（垂直）マージンは単なるものであるということです。

p { margin: 1em 0; }
...
<p>Paragraph one</p>
<p>Paragraph two</p>

それらの間のスペースは 2em ではなく 1em になります。

パディングは別です。段落にパディングがある場合、それはボックス内にあります。これらすべての情報源は、W3C CSS 標準です。たとえば、マージンを折りたたむ:

この仕様では、 マージンを折りたたむという表現は、2 つ以上のボックス (互いに隣り合っているか、ネストされている可能性がある) の隣接するマージン (それらを分離するパディングまたはボーダー領域がない) が組み合わされて、1 つのマージンを形成することを意味します。

CSS2 では、水平マージンが崩れることはありません。

特定のボックス間で垂直マージンが崩れる場合があります。

  • 通常のフローでブロック ボックスの 2 つ以上の隣接する垂直マージンが崩壊します。結果のマージン幅は、隣接するマージン幅の最大値になります。負のマージンの場合、隣接する負のマージンの絶対最大値が、隣接する正のマージンの最大値から差し引かれます。正のマージンがない場合、隣接する負のマージンの絶対最大値がゼロから差し引かれます。
  • フローティング ボックスと他のボックスの間の垂直マージンは折りたたまれません。
  • 絶対配置ボックスと相対配置ボックスのマージンは崩れません。

折りたたまれたマージンの図については、マージン、パディング、ボーダーの例を参照してください。

境界線は少し異なります。特に、CSS に依存せずに互いに折りたたむことができる表ではそうです。

もちろん、話はそれだけではありません。幅、マージン、ボーダー、パディングの組み合わせの計算方法はブラウザーによって異なりますが、ブラウザーを強制的に標準モード (DOCTYPE を使用) にし、大きなトピック自体 (これらの種類の問題）。

于 2009-02-20T07:43:39.940 に答える