0

CSS コードを含む非常に単純な HTML があります。理由がわかりません。css ルールは a タグには適用されませんが、p タグでは機能します。aタグをapタグでラップすればcssは動きますが、ラップしないと動かない理由がわかりません。

ここに完全な例がありますhttp://jsfiddle.net/juaning/84Xn2/

CSS:div p, a { margin-top: 35px; font-size: 24px; }

html:<div class="family"> <a href="https://www.facebook.com/codecademy">Luigi</a> </div>

4

5 に答える 5

4

タグのボックス モデルは、aタグのボックス モデルとは異なりますp。次の 1 行を追加します。

div p, a {
    display: inline-block;

デフォルトでは、aタグにはdisplay: inlineボックスモデルがあるため、通常のテキストと同じ行 (つまり 内p) に簡単に配置できます。タグは、pそれ自体がエンティティであり、常にテキストの「ブロック」または「ボックス」であるため、デフォルトでpがありdisplay: block;ます。

フィドル: http://jsfiddle.net/ECAbd/1/

于 2013-08-05T05:35:23.203 に答える
1

アンカーはdisplay: inlineデフォルトであり、段落は（思い出すと）display: inline-blockです。マージンはインライン要素には適用されません。これは、CSS で明示的に に設定displayすることで簡単に修正できます。inline-block

于 2013-08-05T05:35:56.927 に答える
0

このルールを css に追加します -

display: block;
于 2013-08-05T05:36:01.180 に答える
0

別の解決策は、コード「div p、a」を次のように置き換えます

div p, div a { font-size: 24px; 行の高さ: 100px; 表示: インライン; }

margin-top ではなく、line-height (ボックスの高さと同じ) を使用して垂直方向の中央揃えを作成したことに注意してください。しかし、これは複数行の解決策ではありません。

于 2013-08-05T06:09:09.607 に答える