- 締切済み
スタイルシートでpaddingを使うと背景がずれる
はじめまして。はじめて質問させて頂きます。 スタイルシートに関する質問なのですが、例をあげて質問させて頂きます。 sample.html---------------------------- 途中抜粋 <table border="0" cellspacing="0" cellpadding="0" > <tr> <td id="key1">例</td> </tr> </table> style.css-------------------------------- td#key1 {background-image: url(image/sample.gif); vertical-align: top; padding-top: 5px;} 以上のようにテーブルの中で"例"という文字を上から5px分下にずらしたいので、vertical-align: top; padding-top: 5px; と記述してあげたのですが、"例"という文字と同時に、背景である(sample.gif)も同時に下方向にずれてしまいます。背景がずれないようにするには vertical-align: top; padding-top: 5px; という記述以外に何か記述方法がありますでしょうか？ よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- nanami0224
- ベストアンサー率40% (2/5)
試しにやってみましたが、背景はずれず(同じ位置に表示される)に、 例という文字だけ下にずれました。 必然と、枠も下に広がります。 ↓スタイルシートに分けるのが面倒だったのでhtmlファイル 一つにまとめました。 イメージファイル名は適当に。 質問は抜粋とあるので、他が影響しているか ブラウザ（私はIE）が原因かもしれません。 html言語としては、ずれることは無いはずです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> td#key1 {background-image: url(xxx.gif); vertical-align: top; padding-top: 30px; font-size:40px} </style> </head> <body> <table border="1" cellspacing="0" cellpadding="0" > <tr> <td id="key1">例</td> </tr> </table> </body> </html>
<td id="key1"><span id="aa">例</span></td> #key1 {background-image: url(image/sample.gif); padding:0;} #aa {vertical-align: top; padding-top: 5px;} のようにするのはいけないのですか？
