<!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>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1467">
<img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6cb457e7b0499.png" alt="小门道AI">
</a>
<div class="aritcle_card_info">
<a href="/ai/1467">小门道AI</a>
<p>小门道AI是一个提供AI服务的网站</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="小门道AI">
<span>117</span>
</div>
</div>
<a href="/ai/1467" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="小门道AI">
</a>
</div>
<p>阳春布德泽 万物生光辉</p> <p>常恐秋节至 ?黄华叶衰</p> <p>百川东到海 何时复西归</p> <p>少壮不努力 老大徒伤悲</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div></body></html> 没发现楼主两段代码有什么不同啊，ie8、ff测试都没问题；
楼主所说的绿边，是由于浏览器默认情况下body会有一定的margin值，楼主只要在body样式里加一条margin:0px;就行了
我加了一个visible=false的div后也出现了同样的问题：凡是设置float:left的div都上移了20px，当我把visible=true后就又正常了
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
518
收藏
