当所有边距都是15px时，我的元素应该在哪里？

Question

我有一个<div>元素，我为边框添加了15px的边距。 请看一下html＆amp; css代码。

HTML

<div id="test">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, mazim nemore postulant qui ut,</p>

</div>

CSS

#test{
width:800px;
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-left:15px;**
border:2px solid black;
-moz-box-shadow:2px 2px 1px 1px black;
-webkit-box-shadow:2px 2px 1px 1px black;


}

所以根据我的css样式表边距设置为15px。 （我本来可以使用速记符号：15px）。当在浏览器中运行时，只有顶部和左边距设置为15px，显然底部和右边的边距超过15px。即使我们已经为右边和底部定义了边距，为什么会发生这种情况呢？ 是否有必要为所有方面定义保证金？

Answer 1

默认情况下，div位于视口的左上角，或者距离它15px，因为顶部和左侧的边距。

如果你在这个div右边有另一个div而下面有一个div，你会看到所有边的边距都是15px。目前，在右侧和div下面有开放空间，因此边缘没有任何意义。这就像在地球上留下一个边缘：它不会将它推离外太空。 ： - ）

Answer 2

我不太确定你想要实现的目标。但是，这里有几个问题？如果div显示阻止，为什么需要同时设置宽度和右边距？这些**是什么用的？基本上如果你删除那些**和宽度你应该没问题。这是由此产生的CSS ...

#test{
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-left:15px;
border:2px solid black;

-moz-box-shadow:2px 2px 1px 1px black;
-webkit-box-shadow:2px 2px 1px 1px black;

}

这是一个JS Fiddler，希望你想要实现的目标

Answer 3

从我所知道的，你的元素到处都是margin:15px;所在的位置。您看到的“额外”空间是填充浏览器窗口的身体其余部分。我使用你的div和颜色的第二个副本把JS Fiddle扔到一起，这样你就可以看到究竟发生了什么。

第一个<div>和第二个都有15px的边距。这导致它们之间的间隔为30px。如果我们将它们定义为display:inline-block;，您会在水平间看到类似的30px间隙。

请记住，CSS框模型使用边距来定义元素边框外的区域。

Answer 4

当所有边距都设置为这样时，你的元素就是它应该是的位置。你可能只是稍微混淆了术语，让我澄清一下。

（我为偶然的英语道歉，但我发现这有助于更好地解释复杂的概念。）

边距不会调整元素的大小以适应它们周围的区域。他们也没有调整窗口大小。相反，他们让元素保持默认的高度/宽度并在它们周围放置一个缓冲区，告诉其他元素“你可以靠近但不能靠近！”即使是窗口服从......它在左上方的墙壁和元素之间放置了15px的距离。另外两个方面（底部和右侧）显然距离较远，因此这个边际根本不会影响它们。

如果您的目标是让元素伸展以填充窗口，并且所有边都使用15px缓冲区，那么此CSS将使用您需要的方法：

#test{
position: absolute;
left: 15px;
top: 15px;
right: 15px;
bottom: 15px;
border:2px solid black;
-moz-box-shadow:2px 2px 1px 1px black;
-webkit-box-shadow:2px 2px 1px 1px black;
}

如果您希望窗口本身的大小缩小到元素的大小（加上15px缓冲区），则需要一些Javascript编码，因为CSS目前没有该功能。如果你需要的话，互联网上有许多教程。