- ベストアンサー
ボタンのコード ｃｓｓ記述バグ？
- マウスのポインターをボタンの上におくと、ボタンとボタンがくっついてしまいます。
- マウスのポインターをボタンの上におくとボタンの距離を一定に保ちボーダーの幅だけかえたいですが、どうすればよいでしょうか？
- コードにバグがあると思いますが、分かりません。お分かりの方がいらっしゃいましたら、教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
私もあまり詳しくないのですが、 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- .mag { margin-top:0px; margin-bottom:20px; } .test a { display:block; text-decoration:none; background-color:#00FF00; color:#000000; font-size:12px; padding-top:10px; padding-bottom:10px; padding-left:5px; border-top:solid 2px #000000; border-bottom:solid 5px #000000; border-left:solid 2px #000000; border-right:solid 5px #000000; width:600px; } .test a:hover { border-top:solid 5px #000000; border-bottom:solid 2px #000000; border-left:solid 5px #000000; border-right:solid 2px #000000; } --> </style> </head> <body> <div class="mag"><div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div></div> <div class="mag"><div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div></div> <div class="mag"><div class="test"> <a href="index.html">あいうえおかきくけこたちつてと</a> </div></div> </body> </html> のように、 margin-top:0px; margin-bottom:20px; を削除して、外に出すとうまくいくみたいです。
その他の回答 (1)
- neorg
- ベストアンサー率54% (235/433)
color:#000000; font-size:12px; margin-top:20px; とmargin-top:0px;のところを20px;にするとなおると思います。
お礼
neorgさん 一度、「回答への補足」を記載すると、追記ができなかったので「お礼」のところに書いています。 >margin-top:0px;のところを20px;にするとなおると思います。 上記のneorgさんのご意見を実行すると問題は回避できるのですが、今度は一番上のボタンの上に20pxのマージンができてしまいます（最初は、margin-top:0pxでした。）。このあたりは、どの様に回避するのかご存知ですか？ CSSの記述自体に大きな改変が必要ですか？ キャサリン
補足
neorgさん ご回答ありがとうございました。 もし、お手間でなければ理由をお聞かせ願えるでしょうか？ 理論的に理解できないと、次回も同じ間違いを犯してしまいます。 キャサリン
お礼
neorgさん ご回答ありがとうございました。 neorgさんのおっしゃる通り、 margin-top:0px; margin-bottom:20px; を削除して、外に出すとうまくいきますね。 キャサリン