- 締切済み
CSSで画像の横に余計な余白が・・・
質問させて下さい。 以下のようなソースを書いた時のことです。 HTML部分------------------------------- <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> CSS部分------------------------------- #box-s{ width:300px; float:right; text-align:left; border: 1px solid #000000; clear: none; margin: 2px; padding: 4px; } と書くと、IEだと問題ないのですが、firefoxでみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- vancunt
- ベストアンサー率33% (2/6)
- fujillin
- ベストアンサー率61% (1594/2576)
- vancunt
- ベストアンサー率33% (2/6)
- BellBell
- ベストアンサー率54% (327/598)
#box-s{ width:300px; border: 1px solid #000000; 上記のような指定では、IEのみ内寸で298pxになって、それ以外のブラウザでは300px(外寸302px)になります。 borderの1pxのせいで2ピクセルおかしくなっているって事ですね。 そのうえで text-align:left; のせいで、左右余白が2ピクセル違う、元々padding: 4px;なので2ピクセルの違いが目立つ、という事です。 text-align:center;として、中央に寄せればよいかと。 IEのみ左右4ピクセル、それ以外では左右は5ピクセルとなる。
補足
１～５ピクセルぐらいの少しの余白ではなく、15ピクセルぐらい 余白が出来るんです；； centerにしても、左右が同じだけ大きな余白が。。
- hisajiro
- ベストアンサー率37% (124/329)
text-alignがleftだからでは？ 試しにcenterにするか・・・ 余白で調整するか・・・・ できると思います。
補足
１～５ピクセルぐらいの少しの余白ではなく、15ピクセルぐらい 余白が出来るんです；； centerにしても、左右が同じだけ大きな余白が。。
補足
>>例えば、#box-sの指定でwidthを省略すれば、お望みの表示になりませんか？ ちょっと他の配置との兼ね合いで、幅指定は外せなさそうです。 >>ご提示のような場合はclassなどで指定するほうがよろしいかと… なるほど、そういう使い分けなのですね。。初めて理解しました。 ありがとうございます！