html - 使用负边距使块级元素位于其内容区域之外

Question

我需要使块级元素位于其内容区域之外。内容区域周围有 10px 的边距；这意味着（如预期的那样）其中的项目周围有 10 像素的边缘。我需要消除这个边缘，但保留 10px 的边距（因为它在网站的其他地方需要。）

我整理了一个颜色编码的 JSFiddle来提供帮助，这更有意义。本质上，保持 HTML 和 CSS 的边距不变，我需要我的红色 h2 扩展以触及视口的任一边缘，就好像它们是 100% 一样。

如何实现？我知道使用负边距是可能的，但我似乎无法让它发挥作用。

<div class="contentMain">
<div class="mobCategory">
    <h2><a href="#">Item one</a></h2>
    <h2><a href="#">Item two</a></h2>
    <h2><a href="#">Item three</a></h2>
</div>

body{
        background-color:orange;
    }
    .contentMain{
        background-color:olive;
        margin:10px;
    }

    .mobCategory h2 a{
        background-color:red;

Answer 1

将负边距添加到您的 h2：

http://jsfiddle.net/SxbZe/6/（注意正文的边距设置为 0）

.mobCategory h2 {
    margin-left: -10px;
    margin-right: -10px;
}

Answer 2

您可以通过添加负边距和填充来抵消差异来破解它：

.mobCategory h2 a {
    margin-left: -10px;
    padding-right: 20px;
}

JSFiddle 示例。