欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
外边距，与div间距设置基础之css margin&DIV CSS margin外边距外补白边距样式属性
margin用于设置对象标签之间距离间隔，比如2个上下排列的DIV盒子，我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧，紧贴于边框，marign与padding位置却相反却是紧贴边框位于边框内侧。
一、margin基础语法与结构&& - &
外边距指单词margin，margin是设置对象四边的外延边距，没有背景颜色也无颜色。
1、margin语法
Margin:10px
Margin的值是数字+html单位，同时也可以为auto（自动、自适应）
2、应用结构
Div{margin:10px}
设置div对象四边间距为10px
3、Margin说明
margin是设置对象外边距外延边距离。
margin的值有三种情况，可以为正整数和负整数并加单位如（margin-left:20px）；可以为auto自动属性(margin-left:auto 自动)；可以为百分比（%）值（margin-left:3%）。
Margin延伸（单独设置四边间距属性单词）
margin-left 对象左边外延边距 （margin-left:5 左边外延距离5px）
margin-right 对象右边外延边距 （margin-right:5 右边外延距离5px）
margin-top 对象上边外延边距 （margin-top:5 上边外延距离5px）
margin-bottom 对象下边外延边距 （margin-bottom:5 下边外延距离5px）
常见margin使用场景
4、margin实际应用地方
两个布局之间距离设置。
如上图中&&和&&黄颜色的背景之间空隙（背景土红）。
二、css margin缩写简写& - &
margin属性，如遇到上下、左右、上下左右等情况我们可以缩写简写优化。
你可能需要了解：-：
你可能需要了解：-：
1、只有上下情况缩写
原始：margin-top:5 margin-bottom:6px
缩写简写为：margin:5px 0 6px 0或margin:5px auto 6px auto
2、只有左右情况缩写
原始：margin-left:5 margin-right:6px
缩写简写为：margin:0 6px 0 5px或margin:auto 6px auto 5px
3、只有三边情况缩写
原始：margin-top:5 margin-bottom:6 margin-left:4px
缩写：margin:5px 0 6px 4px或margin:5px auto 6px 4px
4、四边相同值缩写
原始：margin-top:5 margin-bottom:5 margin-left:5 margin-right:5px
缩写：margin:5
5、四边不同值缩写
原始：margin-top:5 margin-bottom:6 margin-left:7 margin-right:8px
缩写：margin:5px 8px 6px 7
6、四边其中上下值和左右值各相同缩写
上下相同、左右相同原始：margin-top:5 margin-bottom:5 margin-left:7 margin-right:7px
缩写：margin:5px 7
Margin简写分析图：
margin样式简写语法应用分析图
三、常用的margin样式
1、用margin设置对象盒子间距
我们常用margin设置2个盒子之间距离，无论上下左右的距离我们均可以利用margin实现间隔。
实际可用margin地方示图
2、利用margin实现布局居中，基础单词：
即可实现对象居中，但需要一个条件，那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器不设置text-align:center内容居中样式，其下级包含对象设置了margin:0 auto也会让其布局居中，但为了兼容各大浏览器建议对body设置一个:center属性样式，这里提供一个为时候无需重复设置:center等初始化样式属性。
四、css margin普通案例
DIVCSS5设置2个盒子，为了体现margin作用，我们对其2盒子设置、一定和。
1、margin用法css代码
.divcss5-top,.divcss5-bottom{width:300height:100border:1px solid #F00}
.divcss5-bottom{ margin-top:10px}
2、html代码片段
&div class=&divcss5-top&&上对象&/div&
&div class=&divcss5-bottom&&下对象，我们设置了margin-top为10px间距&/div&
3、mairgin应用案例截图
margin实例实践案例效果图
从上案例我们分析出margin是设置对象（比如div盒子、盒子等）之间间距，并体现出margin是存在与对象盒子边框外侧。
五、css margin总结
Margin样式是设置对象与对象之间间距，单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性，margin是设置盒子对象之间间距，一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。
margin缺点：
在使用CSS margin的时候容易造成。IE6解释此属性的时候容易造成双倍距离。
您可能需要了解。
你可以再了解以前介绍：/shili/s6.shtml。
如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • ()• • ()• ()• • • • • • • • • • •
必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• &最新文章NEWS• • • • • • • • • • 相关文章RELATED• • • • • • • • • • CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 08:05
原创：本文 DIVCSS5版权所有。
学习与资源分享平台急！div+css IE6和IE7的兼容问题！为什么在IE7和FF中图片显示正常，而在IE6中，图片之间就有空隙呢？_百度知道
急！div+css IE6和IE7的兼容问题！为什么在IE7和FF中图片显示正常，而在IE6中，图片之间就有空隙呢？
代码如下： css: #zuihou { BACKGROUND: url(http://) no- WIDTH: 1024 HEIGHT: 121!margin:0padding:0 } #zuihou UL { FONT-SIZE: 14 MARGIN-RIGHT: 30 LIST-STYLE-TYPE:display: } #zuihou LI { PADDING-RIGHT: 30 PADDING-LEFT: 50 FLOAT: PADDING-BOTTOM: 0PADDING-TOP: 10display: } #zuihou A { COLOR: #000000; TEXT-DECORATION: none } html中: &p&&img src=&.files/i5.jpg&&&/p& &ul& &li&&strong&首页&/strong& &/li& &li&&strong&新闻公告&/strong& &/li& &li&&strong&产品介绍&/strong& &/li& &li&&strong&常见问题&/strong& &/li& &li&&strong&关于我们&/strong& &/li& PS:第二张图是做为背景图。 &/ul&
因为你用了&ul&标记，这个标记在IE6和IE7，Firefox中的默认设置是不一样的，建议你直接应用进行编排吧 &/ul&
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁您的位置： >
IE6 li background 背景图消失问题
IE6 li background 背景图消失问题
li第一个链接换行 背景图消失出现在鼠标:hover 或连接按右键的情况() （不换行的没事） 这应该是ie6 的haslayout问题， 加上高度_height:24就没问题或zoom:1;就没事 ietest ie7 好像也有这问题 晕 不想用hack 有没有更好的办法
ul.list {padding:5background:#FAFAFA;} 加上背景色又没事了 background:#FAFAFA;
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&CSS-liehuo.net&/title&
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:border-spacing:0}
body{padding:20font-size:12}
ul.list {padding:5}
ul.list li {}
ul.list li em {}
ul.list li a{text-decoration:}
ul.lh24 li {line-height:24}
ul.ico1_22 li {background:url(http://journal.mycom.co.jp/images/bullet_arrow01.gif) no-repeat 0px 8padding-left:10}
#left {float:display:width:150background:#FAFAFA;border:solid 1px #D0D0D0;margin-right:10padding-top:10}
&div id=&left&&
&ul class=&ico1_22 list lh24&&
&li&&a href=&#& _fcksavedurl=&#&&抓虾倒闭了 RSS阅读器是否将要开始衰败&/a&&/li&
&li&&a href=&#& _fcksavedurl=&#&&抓虾倒闭了&/a&&/li&
&li&&a href=&#& _fcksavedurl=&#&&抓虾倒闭了&/a&&/li&
&li&&a href=&#& _fcksavedurl=&#&&抓虾倒闭了&/a&&/li&
&li&&a href=&#& _fcksavedurl=&#&&抓虾倒闭了&/a&&/li&
&li&&a href=&#& _fcksavedurl=&#&&抓虾倒闭了&/a&&/li&
&li&&a href=&#& _fcksavedurl=&#&&抓虾倒闭了&/a&&/li&
&/html&&br /&&center&烈火网更多教程，请访问：&a href=/&target=_blank _fcksavedurl=&/&target=_blank&&/&/a&&/center&提示：可修改后代码再运行!
上一篇： 下一篇：怎么解决IE6 img与元素边界有空隙有关问题_怎么解决IE6上背景图片闪烁有关问题_怎么解决IE8下&自动使用当前用户名和密码登录&造成的登录不正常__脚本百事通
稍等，加载中……
^_^请注意，有可能下面的2篇文章才是您想要的内容：
怎么解决IE6 img与元素边界有空隙有关问题
怎么解决IE6上背景图片闪烁有关问题
怎么解决IE8下&自动使用当前用户名和密码登录&造成的登录不正常
怎么解决IE6 img与元素边界有空隙有关问题
如何解决IE6 img与元素边界有空隙问题很多人在在web开发中，经常会遇到图片和临界元素之间有间隔，多发生在ie6下!
如以下两种情况1.未加效果在ie6下会出现这种情况！;2、加了display:block处理后的效果;
1、代码如下:
Html代码运行
type="text/css"
div{width:205height:121border:1px solid #padding:5}
img{width:205height:121}
src="/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/img//.jpg"
src="/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/img//.jpg"
src="/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/img//.jpg"
&style type="text/css"&
div{width:205height:121border:1px solid #padding:5}
img{width:205height:121}
&div&&/div&
&div&&/div&
&div&&/div&
2、代码如下:
Html代码运行
type="text/css"
div{width:205height:121border:1px solid #padding:5}
img{width:205height:121display:}
src="/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/img//.jpg"
src="/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/img//.jpg"
src="/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/html/exception/showImage.php?url=/img//.jpg"
&style type="text/css"&
div{width:205height:121border:1px solid #padding:5}
img{width:205height:121display:}
&div&&/div&
&div&&/div&
&div&&/div&
这时候应先检查排版，如果仍然不能解决，可考虑以下方法：
第一，给图片img标签display:block。img{display:block} 第二，定义容器里的字体大小为0。
div {width:110border:1px solid #000000;font-size:0}
第三，定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。
img{vertical-align:bottom}
其他还有把图片下边距设为负值和改写HTML标签的排列。我觉得前三种就完全可以解决了。
造成图片在IE下与容器下边界有空隙的在网上搜了一下，发现old9说的图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关，不一定是 5px），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。至于这里的HTML属性align="center"（对于图片浏览器会处理成align="middle"），就相当于vertical-align: 所以道理也是一样的，只要vertical-align不取baseline，这个空隙就消失了相关评论1.ie的显示有几种模式，在html文档的开始部分声明如果声明为strict模式，ie以w3c的方式显示文档，而w3c的标准里面默认是一个inline的标签，除非自己显式的声明为 block2.那个空隙是ie针对盒模型默认的line-height和font-size. 给img desplay:虽然能解决问题,但没从结构上来考虑.可谓治标不治本.
转自:http://www.ok22.org/art_detail.aspx?id=173
怎么解决IE6上背景图片闪烁有关问题
如何解决IE6下背景图片闪烁问题如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片；而IE6在这里有一个bug，它每次都从服务器端读取背景图片，结果就是，若服务器反应较慢hover效果就会出现短暂的空白，令人极度不爽。
background:url(images/normal.gif);
4. a:hover {}{
background:url(images/hover.gif);
6. }一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的，效果差强人意。今天无意中从一个老外的网站上发现了一个比较妥善的解决方案，具体来说就是在页面中加入一段简单的javascript脚本，告诉ie6：本地有背景图片的话就不要麻烦服务器了。
1. document.execCommand("BackgroundImageCache",false,true);关于这段脚本的放置方式有两种：1.纯css方式，在css中加入如下代码
1. html {}{
filter: e-xpression(document.execCommand("BackgroundImageCache", false, true));
3. }2.随便在页面中哪个位置（head、body或者onload）调用上面提及的脚本，例如：
1. document.execCommand("BackgroundImageCache", false, true);鉴于e-xpression严重影响浏览器效率，建议采用第二种方式。最后，总结完整方案：普通、hover状态对应的图片合并成一张，css中通过background-postion控制其位置，页面中加入从缓存读取背景图片的javascript脚本。转自：http://www.ok22.org/art_detail.aspx?id=169
怎么解决IE8下&自动使用当前用户名和密码登录&造成的登录不正常
如何解决IE8下"自动使用当前用户名和密码登录"造成的登录不正常客户端IE设置:moss的地址在客户端的信用站点列表中，在信用站点中设置了“自动使用当前用户名和密码登录”问题描述:用户使用域用户登录，在IE8下面无法切换用户登录到MOSS系统中例如A用户登录到计算机，想用B用户登录到MOSS中，在我们的登录页面(匿名)输入B用户的信息，但登录后还是A用户，而且你将用户名和密码输入错误也能登录，登录后是A用户。登录moss，我们采用的是xmlhttp的方式，发送用户名和密码到该页面。本来在IE6下面是可以的，前阵子升级到IE8下面就有这样的问题但是在我自已的windows 2008的机器上装IE8又没有这个问题------解决方案--------------------最好别用IE8
------解决方案--------------------你用xmlhttp的post方法：oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)，把你的user信息传过去。xmlhttp有时的确保存用户session，而xmlserverhttp就不会了。------解决方案--------------------你在IE-安全 自定义level里面设置登录时弹出用户名和密码输入框.
------解决方案--------------------打开运行窗口--&输入--&regsvr32 -u msxml3.dllregsvr32 -u msxml4.dllregsvr32 -u msxml6.dll------解决方案--------------------在 iis 目录 记住域名，配置ie自动使用当前用户名和密码登录
这样不可以切换用户
要切换就需要弹出用户密码输入框
我们公司这几天正做这个了
我就是这么做的 没有出现问题啊
如果您喜欢IT行业或者对IT行业感兴趣，想开拓技术视野，欢迎加入本站官方QQ群：，在群里认识新朋友和交流技术^_^
本站联系邮箱：