CSS负边距

原文链接：
负边距详解

---

在static元素中使用负边距

static元素：没有使用过float的元素

image

• 在top/left使用负边距时，它把元素向这个特定的方向拉

 /* Moves the element 10px upwards */
<div style="width: 100px;height: 100px;margin-top: -10px;overflow: hidden;">
    <p>item11112222222</p>
    <p>item33333444444</p>
    <p>item55555666666</p>
</div>

前后对比：

移动前
移动后

• 在bottom/right使用负边距时，将后面/右侧的元素往里拉覆盖自己

/*
将第一个div后面的元素全部向上拉50px，覆盖掉前一个div
*/
<div style="width: 100px;height: 100px;overflow: hidden;margin-bottom: -50px;">
    <p>item11112222222</p>
    <p>item33333444444</p>
    <p>item555556666666</p>
</div>
<div style="width: 100px;height: 100px;overflow: hidden;">
    <p>item11112222222</p>
    <p>item33333444444</p>
    <p>item555556666666</p>
</div>

前后对比：

移动前
移动后

• 未设置宽度时，左右负边距会把元素往两个个方向拉来增加宽度，此时margin的作用相当于padding

在浮动元素中使用负边距

• 对一个浮动元素使用负边距，会产生空白，其他元素可以覆盖这个空白，用于用户流式布局，eg：右侧固定宽度，左侧自适应宽度。

index.html:

    <div class="left">
        <div class="left-element">item1</div>
    </div>
    <div class="right">item2</div>
css:
.left {
    width: 100%;
    float: left;
}

.left-element {
    height: 100px;
    background-color: red;
    margin-right: 100px;
}

.right {
    width: 100px;
    height: 100px;
    float: right;
    margin-left: -100px;
    background-color: blue;
}

• 如果两个元素都使用了左浮动并且设置margin-right:-20px。#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是#mydiv1并不会有任何变化，而是依然保持原先的宽度。

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

• 如果负边距和宽度一样大的话，它就会被完全覆盖掉。

解决bug

---

• 文本和链接问题
  在float中使用负边距可能会在旧的浏览器造成一些问题，比如：

  • 链接不可点击
  • 文本变得很难选择
  • 失去焦点的时候按tab键失效

  解决方法：添加position:relative。

• 图片被剪切
  使用IE6时，当遇到覆盖和浮动的时候内容有些时候会突然被剪切掉。
  解决方法：同样的只要给浮动元素加上position:relative。