重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

CSSでボックスの位置を変えたときの余白を消す

解決済

  • 質問者：tisnora
  • 質問日時：
  • 回答数：2件

CSSでボックスの位置を変えたとき、変える前にボックスがあった場所が余白になると思いますが
その余白をつめる方法はないでしょうか？
やはりページを１つの大きなボックスにして設定するしかないでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

position:relativeでずらした時の余白でしたら、ページ全体かどうかはともかく


それが含まれる部分についてはボックスで囲う必要があるかと思います。
唯一マージンでずらせば、ずれる前の領域は余白となりませんが
扱いが難しく、また、MAC版IEではマージンの負数には未対応です。

まだ全体像が理解できていないのですが、とりあえず・・・
何パターンかサンプル書いてみたので参考になれば。（なるのかな？？）


<html>
<head>
<title>画像を重ねるテスト</title>

<style type="text/css">
<!--
dt{margin-top:2em;}
dd {background:#ccc;}

#img2 {margin-top:-25px;margin-left:50px;}
#img3 {margin-top:-25px;margin-left:100px;}

#layer2 {position:relative;height:100px;}
#img5 {position:absolute;top:25px;left:50px;}
#img6 {position:absolute;top:50px;left:100px;}

#layer3 {height:100px;overflow:hidden;}
#img8 {position:relative;top:-25px;left:50px;}
#img9 {position:relative;top:-50px;left:100px;}
-->
</style>
</head>
<body>

<h1>画像を重ねるテスト</h1>

<dl>

<dt>1.負数のマージン<samp>(margin:-xx)</samp>で重ねる（MacIEではNG）</dt>
<dd>
<img src="～" alt="" width="100" height="50" id="img1"><br>
<img src="～" alt="" width="100" height="50" id="img2"><br>
<img src="～" alt="" width="100" height="50" id="img3">
</dd>

<dt>2.絶対配置<samp>(position:absolute)</samp>で重ねる</dt>
<dd id="layer2">
<img src="～" alt="" width="100" height="50" id="img4">
<img src="～" alt="" width="100" height="50" id="img5">
<img src="～" alt="" width="100" height="50" id="img6">
</dd>

<dt>3.相対配置<samp>(position:relative)</samp>で重ね、余分な部分は見せない<samp>(overflow:hidden)</samp></dt>
<dd id="layer3">
<img src="～" alt="" width="100" height="50" id="img7"><br>
<img src="～" alt="" width="100" height="50" id="img8"><br>
<img src="～" alt="" width="100" height="50" id="img9">
</dd>

</dl>

<p>以上、3パターン</p>

</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： steel_gray
  • 回答日時：

ボックスの位置を変えるといっても色々なケース、やり方がありますので、現在どのようになっていて、どの辺りが問題なのか、具体例（できれば実例）を挙げてもらえると何かアドバイスができるかもしれません。

この回答への補足

具体的には
　最初に画像をごく普通に数枚<img src="">で並べます
　そしてそれぞれの画像に相対位置を設定して１番最初においた画像に２枚目以降の画像を重ねていきます
　すると、２枚目以降の画像があった場所、相対位置を設定する前の位置（0px,0px）に余白ができます
　視覚的には何もない余白です。スクロールバーして下まで見ることができますがもちろん何もない余白です
　この余白はかっこ悪いので消したいわけです
説明が下手だったかもしれませんがよろしくお願いします

補足日時：2005/01/27 14:06
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報