Question

在我的一次采访中有人问我：“如果我们在div1上应用100保证金，会有两个div，div1和div2，结果将是什么，它将如何影响两个div？”。互联网，但未获得确切答案。

Answer 1

以简单的方式，如果您的div包含任何内容，则您的div带有边距移动，如下面的snippet.div所示。s marginpet的所有四个面都有100px的边距，如果您要给任何特定的边距留白，则可以（顶部边距，底部边距，右边距右边或左边距。）

<div style="margin: 100px">This div has 100px margin.</div>

<div>This is initial div</div>

Answer 2

由于您未提供保证金计量单位，因此我假设为px。如果我们在谈论两个div元素而没有任何其他样式（重要），那么它们的display属性值是block，第一个{{1 }}将仅获得100的边距，而另一个将以视觉方式移动，因为第一个'div边距将占用一定的空间，从而将第二个向下压。如果这些元素具有任何内容，则第一个div内容将从另一个元素的内容向右移动100。

div

#div1 {
  margin:100px;
}

Answer 3

您可以轻松地尝试一下。

创建一个基本且最小的HTML页面，并检查发生了什么。您问题中的信息有点稀缺，但请举个例子

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    #div1 {background-color: red;}
    #div2 {background-color: green;}
  </style>
</head>
<body>

  <div id="div1" style="">DIV 1</div>
  <div id="div2">DIV 2</div>

</body>
</html>

您最终将看到两个彼此重叠的彩色条。

如果现在将第11行的style=""更改为style="margin: 100px;"，您将看到更改的内容。第一个div的顶部，左侧，底部和右侧100像素的空间。

但是由于您的问题缺少详细信息，例如关于两个DIV的定义方式，如果margin应该是px或em或类似的值，那么这个答案基本上只是猜测。

在<div1>上应用边距

3 个答案: