<!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><!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> 我测试过了。。。
两段代码的现实情况是一模一样的。。。
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; width:400px; margin:0px; 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>position:relative; top:-10px; left:-10px;
body{
background-color: green;
}
你背景颜色设置的绿色
body{
background-color: green;
}
你背景颜色设置的绿色
您好 谢谢 我想知道的是 为什么会有这个绿边 div为什么不是贴紧 top:0px;left:0px
float:top
float:top
谢谢 这样写么？还是不行啊
<!DOCTYPE html><html><head><title>untitled</title><style> #HelloDiv{ background-color: red; width:400px; margin:0px; border:40px solid blue; padding:30px; float:top left; } body{ background-color: green; }</style></head><body><div id="HelloDiv"> <p>青青园中葵 朝露待日?</p> <p>阳春布德泽 万物生光辉</p> <p>常恐秋节至 ?黄华叶衰</p> <p>百川东到海 何时复西归</p> <p>少壮不努力 老大徒伤悲</p> </div></body></html> 没发现楼主两段代码有什么不同啊，ie8、ff测试都没问题；
楼主所说的绿边，是由于浏览器默认情况下body会有一定的margin值，楼主只要在body样式里加一条margin:0px;就行了
我加了一个visible=false的div后也出现了同样的问题：凡是设置float:left的div都上移了20px，当我把visible=true后就又正常了
