1

次の html & css スニペットでそれを教えてください: -

HTML:

<p>Paragraph Text</p>
    <p>
        <a class="cta" href="#">Visit Blog</a>
    </p>
<p>Paragraph Text</p>

CSS:

a.cta  {
   font-size:18px;
   margin-top: 50px;
   margin-bottom: 50px;
   margin-left: 40px;
}​

1)上下の余白がアンカーの「cta」クラスに適用されないのはなぜですか? . 2) 左マージンが問題なく適用されるのはなぜですか
?

4

4 に答える 4

3

display: inline-block;CSSに追加する必要があります

デモ

CSS

a.cta  {    
    font-size:18px;    
    margin-top: 50px;    
    margin-bottom: 50px;    
    margin-left: 40px;
    display: inline-block;
}

説明:<a>はinline要素であるため、インライン要素は上下マージンを取らないため、宣言inline-blockまたはblock

インライン要素とブロック レベル要素のリスト

于 2012-10-28T05:52:15.630 に答える
1

aデフォルトの要素は「インライン」要素です。周囲のテキストと同じ行に表示されることを意味します。定義上、インライン要素には上下の余白はなく、左右のみです。上マージンまたは下マージンを追加するには、以下に示すように CSS を変更して、エレメントを「ブロック」タイプのエレメントとして宣言するだけです。

a.cta  {
   display: block;
   font-size:18px;
   margin-top: 50px;
   margin-bottom: 50px;
   margin-left: 40px;
}​

ただし、インライン要素からブロック要素に変更すると、いくつかの結果が生じることに注意する必要があります。たとえば、aタグ内のテキストは、その前のテキストの下の独自のセクションに表示されます。それ以降のテキストは、あたかも別の段落の一部であるかのように、その下の別のセクションに表示されます。

于 2012-10-28T05:57:40.717 に答える
0

マージンを有効にするには、a.cta の親要素に幅と高さを指定する必要があります。マージンは、操作するための参照ポイントがなければ、ブラウザーにとってあまり意味がありません。

p{幅:100px;高さ:100px;}

于 2012-10-28T05:52:15.300 に答える
0

別のオプションは、クラスを の<p>代わりに要素に適用すること<a>です。それがあなたがしようとしていることでうまくいくかどうかはわかりませんが、幅を指定しなくても、探しているマージンが得られます。

HTML :

<p>Paragraph Text</p>
<p class="cta">
    <a href="#">Visit Blog</a>
</p>
<p>Paragraph Text</p>​

CSS :

p.cta  {
font-size:18px;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 40px;
}​

そしてJsFiddle。

-マルカテチュラ

于 2012-10-28T06:02:43.790 に答える