要素内にaタグがある場合とない場合に同じ表示にしたい

HTML
<p class="sample"><a href="">テキスト</a></p>

があり、背景色を変えるためスタイルを
p.sample a {
display: block;
padding: 10px 20px;
}
にしています。
hover時に背景に変な隙間を作りたくないので、p側ではなく、a側にpaddingを付けたいのですが、p.sample内にaタグがない場合、paddingが効かなくなってしまいます。
aタグがある場合、ない場合共に同じpaddingを保てる書き方はないでしょうか。

No.4 回答者： ごんじろう 回答日時： 2017/05/10 07:17

aタグがないpタグのクラス名をsapmleではない、別のクラス名にして、aタグにつけていたpaddingをそちらのクラスに設定すれ

ばよいのでは？

No.3 回答者： t_fumiaki 回答日時： 2017/05/05 06:46

paddingで行なおうとするところに無理があります。

pとaを別々に設定し、同じ内容にして両方に効かす。
この時paddingでやると二重に効いてしまう。

だから、width とheightで領域の大きさをチャント指定する。

例えば

p {border:1px solid #333;}

p.sample{
display: block;
width:300px; height:30px;
line-height: 2;
}

a{
display: block;
width:300px; height:30px;
line-height: 2;
}

a:hover{background-color:#ff0000;}

この回答へのお礼

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

お礼日時：2017/05/05 13:03

No.2 回答者： t_fumiaki 回答日時： 2017/05/04 21:17

>>pにpaddingを付けると、a:hoverのときに背景が変わるため

こういう質問は、隠さずに関係するcss部分を全部提示しないと解らないんだ。

100人いれば100通りのcssの組み方が有って、どれも正解。

未だ、関係部分を全部提示して無いだろが・・！

この回答へのお礼

質問に
「背景色を変えるためスタイルを・・・」
「hover時に背景に変な隙間を作りたくないので・・・」
と書いてますが。

お礼日時：2017/05/04 21:27

No.1 回答者： t_fumiaki 回答日時： 2017/05/04 18:44

p.sample {

display: block;
padding: 10px 20px;
}

で駄目な理由が解らない

aタグがあっても無くても効かせたいのに、何故「p側ではなく、a側にpaddingを付けたい」のか解らない。

この回答へのお礼

pにpaddingを付けると、a:hoverのときに背景が変わるため、paddingのエリアが白バックになってしまうためです。
具体的には、p側にborder:1px solid #333;
などとしているので、隙間が空いてしまうのを防ぎたいです。
また、p側にpaddingを付けるとpaddingのエリア部分はaのhoverが効かなくなります。

お礼日時：2017/05/04 19:47