質問: cssで画像の横に余計な余白が・・・ 質問させて下さい。 以下のようなソースを書いた時のことです。 html部分------------------------------- ! ! css部分------------------------------- #box-s{ width:300px; float:right; text-align:left; border: 1px solid #000000; clear: none; margin: 2px; padding: 4px; } と書くと、ieだと問題ないのですが、firefoxでみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。
回答: #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ピクセルとなる。