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

【问题标题】：Where should my element be when all margins are 15px?当所有边距都是 15px 时，我的元素应该在哪里？
【发布时间】：2014-02-03 14:55:28
【问题描述】：

我有一个<div> 元素，并为边框添加了 15px 的边距。请查看 html 和 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。（我可以使用速记符号 margin:15px）。当它在浏览器中运行时，只有顶部和左侧边距设置为 15px，显然从底部和右侧有超过 15px 的边距。为什么即使我们定义了右边距和底部边距，也会发生这种情况？没有必要为所有边定义边距吗？

【问题讨论】：

右侧和底部是否有其他 div 设置了更大的边距？
obviously there are more than 15px margins from bottom and right。你为什么这么说？当您悬停时，Web 检查器可能会显示较大的右边距，但这是一种误导。下边距为 15px。
盒子阴影会增加空间。
顺便说一下 box-shadow: 现在你不需要 -moz-box-shadow: 或 -webkit-box-shadow: 就足够了
我添加了我的结果截图。

标签： html css xhtml margin

【解决方案1】：

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

如果您在该 div 的右侧和下方有另一个 div，您会看到边距在所有边都是 15px。目前，div 的右侧和下方有空地，因此边距没有任何意义。这就像在地球上设置了一个边缘：它不会把它推离外太空更远。 :-)

【讨论】：

+1 bahahaha...您的地球-宇宙类比是如此真实（而且恰到好处）...他怎么还不明白呢？

【解决方案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，希望这是您想要实现的目标

【讨论】：

sorry ** 添加错误。我编辑了帖子
@Leo- 我认为这不切实际。我的浏览器宽度是 1024 像素。如果 div 宽度为 800 像素，右边距为 15 像素，则左边距必须为 (1024-(800+15)) 209 像素。没有必要为下边距添加左边距和相同的东西。我说的对吗？
我觉得你有点糊涂了...如果 div 设置为 800px 但视口大于那个值，那么将首先应用左边距，然后应用右边距，其余的您在 div 右侧看到的空间不是边距...这是剩余空间，因为视口更宽
这就是为什么我建议删除div的宽度

【解决方案3】：

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

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

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

如果您的目标是让元素伸展以填充窗口，并在所有边使用 15 像素的缓冲区，那么此 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 目前不具备该功能。如果您需要，互联网上有大量教程。

【讨论】：

【解决方案4】：

据我所知，您的元素与margin:15px; 完全一致。您看到的“额外”空间是填充浏览器窗口的主体的其余部分。我使用您的 div 和颜色的第二个副本将JS Fiddle 拼凑在一起，这样您就可以准确地看到发生了什么。

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

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

【讨论】：