ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：noname#64096 margin-left(right)が２倍になるとき、ならない時の違い
困り度：
  • すぐに回答を！
 CSS勉強中のものです。
IE６ではfloatに同じ方向のmarginをつけると２倍幅がとられてしまうということを聞いたのですが、実際に試してみると、その現象が起きるときと、起きない時があります。

これの具体的な違いななんなんでしょうか？

いままで手当たりしだいでやってきたので、基本的な知識が欠けているので、詳しく教えていただけると助かります。

どうかよろしくお願いいたします。
質問投稿日時：08/04/10 14:52
質問番号：3937537
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答10pt
回答者：abril > display:inlineなのですが、こちらはブロック要素のクラスに直接指定すればこの現象が回避できるのでしょうか？
> だとしたら・・・今後、めちゃくちゃ便利なのですが。。

この回避策はIE7.0において弊害がある場合もある様です。
(参考）​http://css-happylife.com/log/bug/000339.shtml​
表示結果を確認しながら、ケースバイケースでの使用にした方が賢明です。FirefoxやOperaはfloatさせている要素に"display: inline;"が定義されていても無視してくれる仕様らしいので問題ないのですが、IE7.0では（上記の参考コンテンツでも「この発生条件が、イマイチ分かってない」と書かれていますので）それを無視してくれるわけではなさそうです。
ダブル・マージンのバグに関しては、複数の回避策がありますので、状況に応じて害のないものを使い分ければ宜しいでしょう。

> いち早くブロック要素とインライン要素について勉強せねば・・・

基本中の基本ですので、精進なさって下さい。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/04/13 19:05
回答番号：No.2
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

良回答20pt
回答者：leap_day こんにちは

<style type="text/css"><!--
.base {
width:600px;
background-color:lavender;
}
.left {
width:250px;
float:left;
background-color:aqua;
margin-left:10px;
}
.right {
width:250px;
float:right;
background-color:aqua;
margin-right:10px;
}
--></style>

<div class="base">
<div class="left">このmarginは2倍</div>
<div class="left">このmarginは普通</div>
<div class="left">このmarginは2倍</div>
<div class="left">このmarginは普通</div>
</div>
<div class="base">
<div class="right">このmarginは2倍</div>
<div class="right">このmarginは普通</div>
<div class="right">このmarginは2倍</div>
<div class="right">このmarginは普通</div>
</div>

ってやつですね

要はブロック要素表示のものをfloatした時に
『左端』(float:left;　margin-left)
『右端』(float:right;　margin-right)
のものにダブルマージンバグがあります

なのでインライン要素表示(display:inline;)すると回避できます
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/04/12 09:10
回答番号：No.1
この回答へのお礼ありがとうございます。

正直、それぞれのdiv classの違いがわかりませんでした・・・
いち早くブロック要素とインライン要素について勉強せねば・・・


display:inlineなのですが、こちらはブロック要素のクラスに直接指定すればこの現象が回避できるのでしょうか？

だとしたら・・・今後、めちゃくちゃ便利なのですが。。

本当にありがとうございました。
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ