Question

我在Sonata项目中看到了以下css。

HTML：

<div class="content">
    <div class="header"></div>
</div>

CSS：

.content {
    padding: 20px;
    margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
}

.header {
    padding: 20px 20px 10px;
    margin: -20px -20px 20px;
}

我的问题是，有正面填充然后用负边距否定它们的目的/优势是什么？代码确实有负余量的评论但我真的没有得到它。为什么不将margin和padding都设置为0？

谢谢！

Answer 1

填充偏移的一个常见用法是使用这样的负边距来修复浏览器在将片段标识符与position: fixed标头结合使用时导航到错误的位置。

假设我有这样的页面......

<div class="fixed-navbar">Navbar Stuff!</div>

<a href="#interesting-content">Link to interesting content below</a>
<p>Lots of content that takes up space and makes the page scroll...</p>

<h2 id="interesting-content">Some interesting content</h2>
<p>Bla bla bla</p>

<p>More really tall content</p>

... .fixed-navbar有这个CSS的地方：

position: fixed;
height: 50px;

当我访问我的页面并点击该链接时，浏览器会将<h2>滚动到页面顶部...导致它固定导航栏的下方！这可能是不可取的。（Fiddle）

但是，我们可以使用以下CSS修复此问题：

#interesting-content {
    padding-top: 50px;
    margin-top: -50px;
}

（Fiddle）

现在，当我们要求浏览器导航到片段标识符时，它会导航到填充的顶部，一个高于实际内容的导航栏高度。这将实际内容定位在我们想要的位置。

Answer 2

请查看CSS Box Model - 您会注意到边框位于填充和边距之间，因此上述内容很可能用于将边框向外推。

Answer 3

Box-sizing可以帮助您清除代码使用css3：http://css-tricks.com/box-sizing/

带有负边距的CSS正面填充

3 个答案: