web-dev-qa-db-ja.com

インライン要素のパディング

CSSの基本についての本を読んでいます。この本では、インライン要素には完全なパディングプロパティがあるが、margin-top/bottomプロパティはなく、margin-left/rightプロパティ。

私の最初の質問は、これを公式声明としてどこで見つけることができるのですか？私は here を見つけましたmargin-top/bottomがautoに設定されている場合は0に設定されています。しかし、margin-top/bottomがインライン要素に適用されないこととは違いませんか？

私の2番目の質問は、インライン要素は本当に完全なパディングプロパティを持っているのですか？私は次の例を試しました：

enter image description here

<!DOCTYPE html>
<html>
  <head> </head>

  <body>
    <div style="margin: 20px; border: solid 20px;background: red;">
      <p style="margin:0">
        test test test test test test test test test test test test test test
        test test test test test test test test test test

        <strong style="padding:20px;background-color:yellow">hello</strong>
        test test test test
      </p>
    </div>
  </body>
</html>

さて、これはパディングが実際に何らかの方法で機能することを示していますが、何らかの理由で、padding-topとpadding-bottomは周囲のテキストに影響を与えません。何故ですか？これはW3標準のどこかで言及されていますか？

cssw3c
5
Adam

この本では、インライン要素には完全なパディングプロパティがあり、margin-top/buttonプロパティはなく、margin-left/rightプロパティのみがあると主張されています。

私の最初の質問は、これを公式声明としてどこで見つけることができるのですか？

それは真実ではないので、あなたはしません。 ボックスモデル では、マージントップとマージンボトムの場合は次のようになります。

これらのプロパティは、置換されていないインライン要素には影響しません。

ただし、「影響なし」は、プロパティが存在しないことを意味しません。具体的には、継承の目的で存在します。この例を考えてみましょう：

p { border:1px solid red }
i { vertical-align:top; }
span { margin-top: 20px; margin-bottom: 20px;  }
b { display:inline-block; }
.two { margin:inherit;  }
<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p>
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

クラス「2」のb要素は、インラインの置き換えられていないspan要素のマージンの上部と下部のプロパティを継承し、そのb要素はインラインブロックであるため、マージンの上部と下部はレイアウトの違いを引き起こすことがわかります。 margin-topとbottomプロパティがスパンに存在しない場合、それは不可能です。

6
Alohci

私の最初の質問は、これを公式声明としてどこで見つけることができるのですか？ margin-top/bottomが「auto」に設定されている場合、「0」に設定されていることがわかりました。しかし、「margin-top/bottonはinline-elementsには適用されない」と言っていることと違いはありませんか？

8.1ボックスモデルの仕様（ http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin ）で、「マージンエッジはボックスマージンを囲んでいます。マージンが幅（高さ）0、マージンエッジはボーダーエッジと同じです。

10.6.1にリンクしたページで、「 'height'プロパティは適用されませんが、ボックスの高さは 'line-height'プロパティによって指定されます。」したがって、高さが適用されないため、マージンエッジは境界エッジと同じになります。

私の2番目の質問は、インライン要素は本当に完全なパディングプロパティを持っているのですか？私は次の例を試しました：

上記と同じ理由。 「ボックスの高さは「line-height」プロパティによって指定されます」。その強い要素の高さはline-heightブロックまたはインラインブロック要素のように参照する高さがないため。インラインブロックのプロパティを指定すると、ブロックがモデル内で高さを持つようになるので、きっと確信しています。

0
Leeish

しかし、何らかの理由で周囲のテキストには影響しません

margin要素のpaddingをstrongに置き換え、strongスタイルにdisplay:inline-blockを追加してみてください

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="margin: 20px;
          border: solid 20px;
          background: red;">
    <p style='margin:0'>test test test test test test test test test test test test test test test test test test test test test test test test
      <strong style="margin:20px;background-color:yellow;display:inline-block;">hello</strong>
      test test test test</p>
  </div>
</body>
</html>
0
guest271314