聊城网站制作公司,聊城网站建设,聊城网站优化,聊城网络公司,聊城网站推广,聊城网站运营,聊城网络运营,聊城搜索引擎优化,聊城网页设计,聊城网站制作
 
 
公司拥有五年的网站建设经验,专业网站制作,推广及网站优化,有大量优秀客户案例
网站建设 | 设为首页 | 加入收藏 | 联系我们  
公告:热烈庆祝聊城精英网络2010版官方网站改版成功!
当前位置 :首页 > 网页知识  

页面 margin为0的引起的间隙处理办法

http://www.55cp1.com   2014-3-22 11:37:57   人气:

以下是引用片段:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">

* {
margin:0;padding:0;
}
#navy{
height:40px;
line-height:40px;
background:orange;
}
.container{
width:960px;
margin:0 auto;
background:#fff;
height:auto;
}
.content{

border:0px solid red;
background:khaki;
}
div:nth-child(2n+1){
height:45px;
background:red;
}
div:nth-child(2n){
height:35px;
background:orange;
}
hr{
border:1px solid red;
}
.col{
display:inline-block;
margin:0 0;
height:35px;

}
.onecol {
 width: 4.7%;
background:khaki;
}
.twocol {
 width: 13.2%;
}
.threecol {
 width: 22.05%;
}
.fourcol {
 width: 30.6%;
}
</style>
</head>
<body>
<div id='navy'>
nav
</div>
<hr >
  <div class='container' >

   <div class='content'   >
 <div class="col onecol" >  1/10 </div><div class="col twocol" >  2/10 </div><div class="col threecol" >  3/10 </div><div class="col fourcol" >  4/10 </div>
<hr style='margin-top:0px'>

 <div class="col onecol" >  1/10 </div>
<div class="col twocol" >  2/10 </div>
<div class="col threecol" >  3/10 </div>
<div class="col fourcol" >  4/10 </div>
  </div>
</div>
 
</body>
</html>

样式都是margin:0
两行代码都一样,但是标签中间的空格的显示会加上空白间隙  
如果把标签中间的空格都删除掉,然后就跟样式完全相符
手动删除空格也不是个办法吧?

因为你用了inline-block,空格也会在里面,你直接用浮动就没有这个了

外边距折叠,指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。

  触发条件

 毗邻,没有被非空内容paddingborder 或 clear ?#25351;?#24320;的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

 这些 margin 都处于普通流中,即非浮动元素,非定位元素

  垂直方向外边距合并的计算

  1) 参加折叠的margin都是正值:取其中 margin 较大的值为最终 margin 值。

<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

  示意图:
      

   2). 参与折叠的 margin 都是负值:取的是其中绝对值较大的,然后,从 0 位置,负向位移。

<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div>
<div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>

  示意图:
     

  

  3). 参与折叠的 margin 中有正值,有负值?#21512;热?#20986;负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。

<div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

   示意图:
      

  4). 相邻的 margin 要一起参与计算,不得分步计算

  要注意,相邻的元素不一定非要是兄弟节点,父子节点也可以,即使不是兄弟父子节点也可以相邻。

  而且,在计算时,相邻的 margin 要一起参与计算,不得分步计算。

<div style="margin:50px 0; background-color:green; width:50px;">
    <div style="margin:-60px 0;">
           <div style="margin:150px 0;">A</div>
    </div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">
    <div style="margin:-120px 0;">
           <div style="margin:200px 0;">B</div>
    </div>
</div>

  错误的计算方式:算 A 和 B 之间的 margin,?#30452;?#31639; A ?#25512;?#29238;元素的折叠,然后与其父元素的父元素的折叠,这个值算出来之后,应该是 90px。?#26469;?#27861;算出 B 的为 80px;然后,A和B折叠,margin 为 90px。

  请注意,多个 margin 相邻折叠成一个 margin,所以计算的时候,应该取所有相关的值一起计算,而不能分开分步来算。

  以上例子中,A 和 B 之间的 margin 折叠产生的 margin,是6个相邻 margin 折叠的结果。将其 margin 值分为两组:

  正值:50px,150px,200px

  负值:-60px,-100px,-120px

  根据有正有负时的计算规则,正值的最大值为 200px,负值中绝对值最大的是 -120px,所以,最终折叠后的 margin 应该是 200 + (-120) = 80px。

  

  5). 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>

  示意图:
      

  6). 创建了块级格式化上下文1的元素,不和它的子元素发生 margin 折叠

  以 “overflow : hidden” 的元素为例:

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>

  若 B 和它的 "overflow:hidden" 包含块发生 margin 折叠的话,金色的条应该位于绿色块的最上方,否则,没有发生。

  示意图:
    

  7). 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

  自身 margin-bottom 和 margin-top 相邻,只能是自身内容为空,垂直方向上 border、padding 为 0。

<div style="border:1px solid red; width:100px;">
    <div style="margin-top: 100px;margin-bottom: 50px;"></div>
</div>

  以上代码运行后,我们讲得到的是红色边框的正方形,方框的宽高?#21152;?#35813;是 100px,高度不应该是 150px。

专业设计团队
满足您的各种设计要求
实力程序开发团队
为您定制各种程序模块
后台管理高效安全
方便更新上传网站资料
全球高速访问
无盲区、定制异地备份
专业客服团队
解决一切使用难题
赠送大容量空间邮箱
免费优化推广
   
关于我们 | 工作机会 | 付款方式 | 网站制作 | 网页制作 | 网页设计 | 网络公司 | 联系我们 | 网站地图
版权所有:聊城精英网络科技有限公司 © 2005-2010 All Rights Reserved.
咨询专线:0635-6950368 技术专线:15192175820 在线QQ:312817927 1485871644
地址:聊城市闸口科技市场 ?#26102;?252000 苏ICP备10112026号
赖扬vs塔什干火车头比分
七星彩走势图下载 3分彩走势图 赛车pk10预测软件 彩经网3d开机号走势图 广东11选5五码分布走势 幸运分分彩开奖结果一样 三d10000期走势图 ag电子不能一直玩 北京时时pc28走势图 山东11选五最精准的计划软件 天津时时彩五星走势图100期 pk10开奖直播众购 棋牌app搭建教程视频 重启时时龙虎走势图 幸运28开奖查询官网app 飞艇开奖