![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
質問させて下さい。
以下のようなソースを書いた時のことです。
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でみると画像の
右側の余白がかなり不自然に開くんです。
少しぐらいの崩れは良いのですが、、、あまりに違いすぎる
のでどなたかお助け願えないでしょうか。
No.4ベストアンサー
- 回答日時:
表示内容のimgがwidth:290pxで、divがwidth:300pxの指定になっているので、そのようになります。
例えば、#box-sの指定でwidthを省略すれば、お望みの表示になりませんか?
質問には関係ないですが、idは唯一ということになっているので、ご提示のような場合はclassなどで指定するほうがよろしいかと…
この回答への補足
>>例えば、#box-sの指定でwidthを省略すれば、お望みの表示になりませんか?
ちょっと他の配置との兼ね合いで、幅指定は外せなさそうです。
>>ご提示のような場合はclassなどで指定するほうがよろしいかと…
なるほど、そういう使い分けなのですね。。初めて理解しました。
ありがとうございます!
No.3
- 回答日時:
ご提示されたソースで下記ブラウザで確認してみました。
IE6,7,8,Firefox3.6
どのブラウザも同じように表示されていますので、
他の箇所に問題があるのではないでしょうか?
もしくはFirefoxのバージョン?
No.2
- 回答日時:
#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ピクセルとなる。
この回答への補足
1~5ピクセルぐらいの少しの余白ではなく、15ピクセルぐらい
余白が出来るんです;;
centerにしても、左右が同じだけ大きな余白が。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
画像イメージの上下左右、欲し...
-
widthやheightの数値に単位(px...
-
CSSでボックスのheightが0になる
-
入力フォームとセレクトボック...
-
CSSで背景画像を一番下にもって...
-
ウインドウを小さくするとbody...
-
イメージマップのhoverについて
-
<div>と<div>の間の10px程の...
-
WEBサイト作成:初心者です...
-
4枚の画像を均等間隔で一列に...
-
Firefoxでネガティブマージンが...
-
メディアクエリで文字サイズを...
-
CSSで微妙にずれる
-
【CSS】ヘッダーの高さが不明の...
-
CSS、width100%でもできる余白
-
【HTML&CSS】フッター下部の余...
-
table周辺の隙間をなくしたい。
-
HTMLでCSSでボーダーが表示され...
-
CSSでborderの指定を解除する記...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報