块与块排版有缝隙解决方案

实现块与块排版有缝隙解决办法汇总

在display属性实现块之间的布局时候会发现，设置的两个块之间有缝隙。

基础代码：

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .container{
            width:500px;
            height:500px;
            background-color:#71b9fe;
        }
        p{
            margin:0;
        }
        .left,.right{
            display: inline-block;
            font-size:10px;
        }
        .left{
            width:200px;
            height:200px;
            background-color:skyblue;
        }
        .right{
            width:200px;
            height:200px;
            background-color:palegreen;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        <p>我是谁</p>
    </div>
    <div class="right">
        <p>有瑕疵</p>
        <p>有瑕疵</p>
    </div>
</div>
</body>

如下图：块与块排版有缝隙解决方案

上图中两个div块中明显有一条缝隙。

如何解决上面的问题：

（1）将第一个div标签结尾与第二个div标签开头首尾缩进一个空格。

代码如下：

代码中可以看出</div><div>直接没有空格

（2）在class名为left（左边）的那块设置margin-right: -5px;

或在class名为right（右边）的那块设置margin-left: -5px;

通过在两个块中更改它的margin属性来调整块的位置。

代码如下：

.left{
    width:200px;
    height:200px;
    background-color:skyblue;
    margin-right: -5px;
    vertical-align: top;
}

或者：

.right{
    width:200px;
    height:200px;
    background-color:palegreen;

margin-left: -5px;
}

两种实现达成的效果是一样的。

注意点：A、负margin是绝对标准的CSS

W3C标注过：对于margin属性来说，负值是被允许的。这是Nuff说的，查看这篇文章会有更多详细内容。

B、负maring不是一种hack方法

千真万确，不能因为缺乏对负marign的理解，或者因为它长得像hack，就认为它是一种hack方法。除非你是用来修复自己在其他地方造成的错误。

C、不脱离文档流

不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。

D、完全兼容

所有现代浏览器都完全支持负margin（IE6在大多数情况下也支持）。

E、浮动会影响负margin的使用

负margin不是你每天都用的CSS属性，应用时应小心谨慎。

F、Dreamweaver不解析负margin

（3）设置整个“容器”的字体大小为0

代码如下：

.container{
    width:500px;
    height:500px;
    background-color:#71b9fe;
    font-size:0px;
}

以上三种方法都可实现将块与块之间的空隙消除。

效果如下：

块与块排版有缝隙解决方案

块与块排版有缝隙解决方案

实现块与块排版有缝隙解决办法汇总

相关推荐