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を保てる書き方はないでしょうか。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
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;}
No.1
- 回答日時:
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が効かなくなります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSで背景画像を一番下にもって...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
safariでの横並びリスト(List...
-
画像と一緒にスライドするリン...
-
widthやheightの数値に単位(px...
-
hpビルダー 複数の表の罫線を...
-
<div>と<div>の間の10px程の...
-
ディスプレイのサイズに合わせ...
-
html5 2段組で行頭を揃える方法
-
divで囲まれたpaddingの指定を...
-
cssで投稿した画像を中央に表示...
-
embed タグを用いると表示が遅い
-
IE6にてliタグに対してposition...
-
横スクロールサイトの中央寄せ
-
CSSで指定した背景画像にリンク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報