[導入の質問] float が div を上に移動させるのはなぜですか? _html/css

[導入の質問] float が div を上に移動させるのはなぜですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:41:41

オリジナル

1389 人が閲覧しました

この投稿は overmind によって最終編集されました: 2010-09-05 12:15:48

最初と 2 番目のコードはほぼ同じで、コード float:left の赤い部分ですが、先発トップ2人が同じではないのはなぜでしょうか？
rree

<!DOCTYPE html><html><head><title>untitled</title><style>	#HelloDiv{		background-color: red;		height:400px;		width:400px;		margin:50px;		border:40px solid blue;		padding:30px;		float:left;	}	body{		background-color: green;	}</style></head><body><div id="HelloDiv">	<p>青青园中葵 朝露待日?</p>   	<p>阳春布德泽 万物生光辉</p>   	<p>常恐秋节至 ?黄华叶衰</p>   	<p>百川东到海 何时复西归</p>   	<p>少壮不努力 老大徒伤悲</p>  </div></body></html>

ログイン後にコピー

アドバイスをお願いします！！！

ディスカッションへの返信（解決策）

テストしてみました。。。
2 つのコードの実際の部分はまったく同じです。。。

ie8

margin=0 の場合はまだ緑色のエッジが残ります
http://hi.csdn.net/attachment/201009/5/1343907_1283672355821B.gif

<!DOCTYPE html><html><head><title>untitled</title><style>	#HelloDiv{		background-color: red;		height:400px;		width:400px;		margin:50px;		border:40px solid blue;		padding:30px;		float:left;	}	body{		background-color: green;	}</style></head><body><div id="HelloDiv">	<p>青青园中葵 朝露待日?</p>   	<p>阳春布德泽 万物生光辉</p>   	<p>常恐秋节至 ?黄华叶衰</p>   	<p>百川东到海 何时复西归</p>   	<p>少壮不努力 老大徒伤悲</p>  </div></body></html>

ログイン後にコピー

By
りー
可能のようです緑のエッジを除去するために、私の質問は、なぜそのような緑のエッジがあるのか、原理は何ですか、そしてなぜ10pxなのかということです。

body{
背景色: 緑;
}
背景色は緑に設定されています

本文{
背景色: 緑;
}
あなたの背景色は緑に設定されています
こんにちは、ありがとう。この緑色のエッジがあるのはなぜですか。 div が top:0px;left:0px に近づいていないのはなぜですか。

float:top

float:top
ありがとうございます。まだ動作しません

元の投稿者の 2 つのコードに違いは見つかりませんでした。ie8 と ff のテストでは問題ありませんでした

元の投稿者が言及した緑色のエッジは次のとおりです。ブラウザにはデフォルトで本文に特定のマージン値があるため、ポスターは本文スタイルに margin:0px を追加するだけで済みます。また、visible=false: all div を追加した後も同じ問題が発生しました。 float:left を 20px 上に移動しました。 true にすると、また通常になります