9

我在 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;
}

我的问题是，拥有正填充然后用负边距否定它们的目的/优势是什么？该代码确实对负边距有评论，但我真的不明白。为什么不将边距和填充都设置为 0？

谢谢！

4

3 回答 3

7

像这样的负边距填充偏移的一种常见用途是修复浏览器在使用片段标识符和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>到页面顶部......导致它在固定导航栏下方！这可能是不可取的。（小提琴）

但是，我们可以使用以下 CSS 解决此问题：

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

（小提琴）

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

于 2015-03-07T21:08:09.103 回答
0

请看一下CSS 盒子模型——你会注意到边框在填充和边距之间，因此上面最有可能用于将边框向外推。

于 2013-04-08T06:01:38.090 回答
0

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

于 2013-04-08T06:04:23.723 回答