画像を読み込ませたらBOXの右側に余白が入る

このQ&Aのポイント
  • 画像を読み込ませたときに、左側のBOXには余白がないのに対し、右側のBOXには余白が入ってしまう現象が発生しています。
  • この問題を解決するために、CSSのfloatプロパティやpaddingプロパティ、widthプロパティ、text-alignプロパティなどを調整する必要があります。
  • また、HTMLの構造にも問題がある可能性がありますので、それを確認する必要もあります。
回答を見る
  • ベストアンサー

画像を読み込ませたらBOXの右側に余白が入る

画像を読み込ませたらBOXの右側に余白が入る #left_box { float: left; padding: 0; margin: 0; width: 206px; text-align: center; overflow:hidden; } #spcm{ float : left; padding-top : 10px; clear : both; width : 206px; height : 59px; } 上記のleft_boxの中に#spcmを入れて広告をランダム表示させているのですが #spcmの右側に余白が入ってしまいます、原因が解明出来ず・・・ どなたかお知恵をお願いします。 htmlは下記の通りです。 <div id="left_column"> <div id="spcm"> <script type="text/JavaScript" src="spcm/banner.js"></script> <script type="text/JavaScript"> random_banner(); </script> </div> </div> ※画像サイズは190×59pxです。

  • HTML
  • 回答数1
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • zeff
  • ベストアンサー率69% (137/198)
回答No.1

206pxの物に190pxの物を入れたら余白が出るのは当然と思うのですが。。 float:leftさせてるからなおさら右は空くのでは。

関連するQ&A

  • 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でみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。

  • 並んだ2つのfloatボックス、片方を固定位置にしたい

    floatでボックスを2つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの2つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる(センタリングの為) ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }

    • ベストアンサー
    • CSS
  • CSS:floatを使っての段組で困っています

    図のような段組をしたいのですが、ソースはあっているでしょうか? サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }

    • ベストアンサー
    • HTML
  • CSS-paddingが反映されません

    入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。 ご教授ください。

  • IEだとdivが横に並びません

    CSSでレイアウトをしているのですが、横にふたつdivを並べたいのに、右側のdivが下にまわってしまいます。 http://oshiete1.goo.ne.jp/qa3576983.html こちらでIEでは左の余白が倍になってしまうと知り、display:inlineを指定しましたが、解決しません。 何が原因でしょうか。 HTML: <div id="main"> <div id="mainl"> </div> <div id="mainr"> </div> </div> CSS: #main { width: 900px; } #mainl { float: left; height: 317px; width: 324px; display: inline; padding-top: 26px; padding-right: 16px; padding-bottom: 0px; padding-left: 40px; } #mainr { float: right; height: 317px; width: 480px; padding-top: 26px; padding-right: 40px; }

    • 締切済み
    • CSS
  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・?

    • ベストアンサー
    • CSS
  • 画像を横並びに2つと、その右側に文字入りのボックス

    画像を横並びに2つと、その右側に文字入りのボックスを横並びに2(よこ)×3段(たて)で配置したいのですが、IE7だけ2つの画像の下に、文字入りボックスが3(よこ)×2段(たて)で並んでしまいます。 IE8やそれ以外のブラウザは画像右側に文字入りボックスが2(よこ)×3段(たて)で並びます。 どのようにすれば、IE7も他と同じようになりますか。 よろしくお願い致します。 <div class="imagebox"> <p class="image"><img src="1.jpg" width="145" height="120" alt=""/></p> </div> <div class="imagebox" style="margin:0 20px 0 10px"> <p class="image"><img src="2.jpg" width="145" height="120" alt=""/> </div> <ul class="box"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> <li>fff</li> </ul> <div style="clear: left;"></div> div.imagebox { background-color: #383838; width: 145px; float: left; margin: 0px; } p.image { text-align: center; margin: 0px; } ul.box { list-style:none; width:100%; margin: 0 0 5px 0; padding: 0; } ul.box li { width: 180px; height: 14px; padding: 4px 5px 4px; border-color: #000033; border-style: double; background: #373737; color: #7e7763; text-align: center; float: left; display: inline; list-style: none; margin: 2px; }

    • ベストアンサー
    • HTML
  • 上部の余白をなくしたいのですが・・・

    Dreamweaver CS5でホームページを作成しています。 デザインビューで見ると一番上に隙間は出来ないのですが、ライブビューやブラウザーでプレビューすると,隙間が出来てしまいます。上部に隙間が出来ない方法を教えてください。 <body> <div id="headWrap"> <div id="header"> <h1><img src="imges/rogo.png" alt="**" width="365" height="74" /></h1> <ul> <li><a href="#">**</a></li> <li><a href="#">**</a></li> </ul> </div> </div> <div id="menu"> <div id="button"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">HOME</a> </li> <li><a href="#">**</a> </li> </ul> </div> </div> <div id="contents"> <p>id "contents" の内容<!--/#contents--></p> </div> <div id="footer"> <div id="footerMenu"> <ul><li><a href="#">ホーム</a></li> <li><a href="#">**</a> </li> </ul> <address>Copyright &copy; All Rights Reserved.</address> </div> </div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> </body> CSS部分 * { font-family:"Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;color:#333; } body {background: #FFF url(imges/bg_body.gif) repeat-x left top; margin: 0px; padding: 0px; } a {text-decoration:none; } #headWrap {width: 100%; background: url(imges/bgimgHead.jpg) repeat-x left top; margin: 0px auto; padding: 0px 10px; } #header {height: 90px; width: 850px; margin: 0px auto; } #menu {height: 100px; width: 100%; background: url(imges/bgimgMemu.jpg) repeat-x left top; clear: both; } #button {height: 40px; width: 850px; margin: 0px auto; } #contents {width: 850px; background: #FFF; margin: 0px auto; clear: both; } #footer {width: 100%; background: url(imges/bgimgFoot.jpg) repeat-x left top; margin: 0px; } #footerMenu {margin: 0px auto; width: 850px; } #headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } #footer #footerMenu ul li {float: left; list-style: none; padding-right: 5px; } どうぞよろしくお願いします。

  • 回り込みfloatの間隔について質問です

    ボックスでボックスを回り込みしています。(?) …書いたほうが早いですね… HTMLが <div id="left"> 左ボックス </div> <div id="right"> 右ボックス </div> CSSが *{ margin: 0px; padding: 0px; } #left { float: left; width: 100px; height: 100px; } #right{ width: 200px; height: 100px; } といった感じです。 左ボックスと右ボックスの間に1~2pxほどの間隔があいてしまいます。 これをなくすにはどうすればいいですか? お願いします。

  • CSSで1つのボックスの中に2つのボックスを横に並べて両サイドをピッタリ表示したい

    CSSをちょこっと勉強している者です。 どうしてもうまくいかないところがあるので質問させてください。 先に参考イメージを載せておきます。 http://www.geocities.jp/shinopo/sample.gif 一番外枠になる1つのボックス(Aとする)の中に2つのボックス (左をB、右をCとする)を横に並べてAの横幅一杯ぴったりに表示 されるようにしたいと思っています。(参考イメージの下を参照) 参考イメージ下のようにAのborderを無くすとBとCが横に並んで ぴったりと表示されるのですが、Aに1pxのborderを設定すると CがBの下段に表示されてしまい、Cの右側とAのborderの間に 少しの隙間ができてしまいます。(参考イメージ上参照) この隙間を無くすにはどのようにすれば良いのでしょうか? この隙間がなくなればBとCは横にぴったりと表示されると思うのすが。 自分なりにCのmargin-rightやpadding-rightに0pxなどを設定して 試してみましたがうまくいきません。 以下にコードを載せておきます。 ご教授よろしくお願い致します。 ============== index.html ============== <html> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" href="./css/style.css" type="text/css"> </head> <body> <div id="centermain"> <div id="container"> <div id="banner"> <h1>見出し1</h1> </div> <div id="content"> <br> <h2>見出し2</h2> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="menu"> <br> <dl> <dt>メニュー</dt> <dd>カテゴリ1</dd> <dd>カテゴリ2</dd> <dd>カテゴリ3</dd> </dl> </div> <div id="foot"><p>Copyright (C) 2009 Test All Right Reserved.</p></div> </div> </div> </body> </html> ============== style.css ============== body{ margin:0px; } #centermain{ text-align:center; } #container{ width:780px; margin-left:auto; margin-right:auto; text-align:justify; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; } #banner{ background-image:url(../img/sima.gif); width:780px; height:60px; } #banner h1{ margin-top:0px; margin-bottom:0px; padding-top:15px; padding-left:20px; } #content{ float:left; background-color:#cccccc; width:540px; height:100px; padding-left:20px; } #menu{ float:right; background-color:#999; width:240px; height:100px; padding-left:10px; } #foot{ clear:both; text-align:center; font-size:12px; color:#ffffff; background-color:#cccccc; width:780px; height:25px; padding-top:7px; }

    • ベストアンサー
    • HTML