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

Question

我有一个 <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。为什么即使我们已经为右侧和底部定义了边距，也会发生这种情况？不需要为所有边定义边距吗？

Answer 1

默认情况下，您的 div 位于视口(viewport)的左上角，或者距视口(viewport) 15 像素，因为顶部和左侧都有边距。

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