在div里面插入图片为啥会有空隙？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在div里面插入图片为啥会有空隙？相关的知识，希望对你有一定的参考价值。
网页设计中一个简单的div ul li
参考技术A 具体你也没说清楚，不明白你的意思，不过你可以试下这个设置ul li的样式为none,list-style:none;不知道是不是你想要的效果 参考技术B 你按照这个方法来做吧！ 这个是我们老师的课课程：
在页面的<body></body>区域写出DIV的大结构：
<div id="header">此处显示 id "header" 的内容</div>
<div id="banner">此处显示 id "banner" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
<div id="footer">此处显示 id "footer" 的内容</div>
结果如图所示：
1、 现在我们要开始利用CSS来定义这些DIV标签的样式了；
首先，我们应该设置一些公共的样式，这样能有效避免以后出现的问题：
先设置BODY的样式；
新建样式文件后命名为index.css，并保存到css文件夹下；
2、 先设置全体的字体样式：
3、 再设置边框，边界距离为0
4、 再设置文字对齐方式：左对齐
完成后，在CSS样式文件里出现 body的标签如下：
body
font-family: Verdana, Arial, "宋体";
font-size: 12px;
color: #575757;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
这样我们就完成了通用标签公共body标签的样式设置，这时如果看页面，你会发现文字变了；
2、设立常用标签的外边距，内边距，边框为0，防止在排版时再重复定义和出现怪问题
div,form,img,ul,ol,li,dl,dt,dd margin: 0; padding: 0; border: 0;
这里特别说明的是：上面的代码中，意思是div,form,img,ul,ol,li,dl,dt,dd使用的属性一样，我们设置一次就可以了。不用每一个都设置；
3、现在CSS.css文件样式表里如下所示：
body
font-family: Verdana, Arial, "宋体";
font-size: 12px;
color: #575757;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
div,form,img,ul,ol,li,dl,dt,dd
margin: 0;
padding: 0;
border: 0;
现在正式开始我们的结构之旅吧！
第一个内容盒子content 是整个网页的范围，包括大小，对齐方式；
设置content的宽度，高度，对齐方式；851 X 658 居中对齐
小技巧：选中代码，再添加样式，这样样式名就自动出现在标签框内了；
设置方框属性如下：当边界左右为自动时，盒子会在页面居中；
在CSS里样式结果如下：
#content
height: 658px;
width: 851px;
margin-right: auto;
margin-left: auto;
现在按照content的方式分别设置好几个大盒子的高度，宽度，并设置一个背景色用来区分；
并使用/*注释*/的方式添加好说明，添加好后结果如下：
/*--公共标签*/
body
font-family: Verdana, Arial, "宋体";
font-size: 12px;
color: #575757;
text-decoration: none;
text-align: left;
margin: 0px;
padding: 0px;
div,form,img,ul,ol,li,dl,dt,dd
margin: 0;
padding: 0;
border: 0;
/*--内容--*/
#content
height: 658px;
width: 851px;
margin-right: auto;
margin-left: auto;
/*--头部导航开始--*/
#header
background: #CCCCCC;
height: 81px;
width: 851px;
/*--头部导航结束--*/
/*--BANNER开始-->*/
#banner
background-color: #999900;
height: 299px;
width: 851px;
/*--BANNER结束--*/
/*--主体内容开始--*/
#main
background-color: #FF9900;
height: 234px;
width: 851px;
/*--主体内容结束--*/
/*--版权内容开始--*/
#footer
background-color: #ccff00;
height: 45px;
width: 851px;
/*--版权内容结束*/
在网页中查看如下：
制作第四步：我们来看今天的重点：
将内容区域main的两个并列的区域排出来；
news和products是并列的，这就要用到浮动属性了float=left
1、首先在main标签里增加两个盒子，news 和products
<div id="content">
<div id="header">此处显示 id "header" 的内容</div>
<div id="banner">此处显示 id "banner" 的内容</div>
<div id="main">
<div id="news">此处显示 id "news" 的内容</div>
<div id="products">此处显示 id "products" 的内容</div>
</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</div>
按照前面的方法我们先设置好两个盒子的大小，并设置不一样的颜色:
加好后代码如下：/*--主体内容开始--*/
#main
background-color: #FF9900;
height: 234px;
width: 851px;
#main #news
background-color: #FF0000;
height: 235px;
width: 417px;
#main #products
background-color: #333300;
height: 235px;
width: 434px;
/*--主体内容结束--*/
我们再来看看结果：
NEWS和PRODUCTS没有水平排列，而是上下排列了，那么在DIV里如何才能水平排列两个盒子呢？
浮动
我们为news盒子添加一个左浮动;
#main #news
background-color: #FF0000;
height: 235px;
width: 417px;
float: left;
因为右边的盒子是向右对齐的，所以我们可以设置products盒子的右浮动；
#main #products
background-color: #333300;
height: 235px;
width: 434px;
float: right;
这样就显示正常了。
我们再看内容新闻部分：实际上左边有一部分是空的，没有用到，那么我们应该怎么办呢？还记得盒子有填充和边界吗？我们给盒子设置一个左边界，是不是就能解决这个问题呢。
以前宽度是417，现在多了85个左边界，所以内容的宽度就改为332了，但这个时候需要设置个内嵌，在IE6和火狐中测试结果就是一样的了；
#main #news
background-color: #FF0000;
height: 235px;
width: 332px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 85px;
display: inline;/*设置内嵌在火狐和IE中显示效果一样；*/
在div中插入图片为啥会有空隙？
例如在div中插入图片的位置存在路径有img src=“图片的位置”等，图片的一些属性值，为什么在插入的背景图中有空隙？回答要详细！谢谢！
img 下的留白，大家看这段代码有啥问题：<div>
<img src=”" mce_src=”" />
</div>
把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写
<div>
<img src=”" mce_src=”" /></div>
后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。
看看是不是这个问题
参考资料：http://blog.sina.com.cn/s/blog_5f0410c90100c26m.html
参考技术A 有可能是IE的3px bug。给右边的层，应用float:left;浮动，即可解决IE 3px bug。给左边的层，应用margin-right:-3px;，同样可解决IE 3px bug。参考资料：http://www.52css.com/article.asp?id=146
参考技术B 我不知道你设置的是背景图片,还是插入图片.两者是不同,如果你插入的是img标签,它当图片是像文字\声音一样的资料元素,你在设置其他的属性时可能会影响到它(比如设置文字的属性).但如果你添加的是背景图片就不同了.具体的问题,你还是要多去试试看才好解决! 参考技术C 把margin值设小一点0或者1，，把border值设为0
以上是关于在div里面插入图片为啥会有空隙？的主要内容，如果未能解决你的问题，请参考以下文章