在 <div1> 上应用保证金

Question

我在一次采访中被问到"There are two divs, div1 and div2 if we apply 100 margin on div1 what will be the result and how it will effect both divs?"..我在互联网上搜索了这个答案，但没有得到确切答案..

Answer 1

由于您没有提供保证金计量单位，我假设px。如果我们谈论两个 div 元素 没有任何额外的样式 （重要），那么它们的 display 属性值是 block，第一个 div 将简单地获得 100 边距，而另一个将在视觉上移动，因为第一个 div 边距将占用一些 space，这将推动第二个。如果这些元素有任何内容，第一个 div 内容将从另一个内容移动 100（向右）。

#div1 {
  margin:100px;
}

<div id='div1'>This is the first div</div>
<div id='div2'>This is the second div</div>

Answer 2

您可以轻松试用。

创建一个基本的和最小的 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;"，您将看到发生了什么变化。 space 的 100 个像素到第一个 div 的顶部、左侧、底部和右侧。

但是由于您的问题缺乏细节，例如关于如何定义两个 DIV，如果 margin 应该是 px，或者 em 之类的，这个答案基本上只是猜测。

Answer 3

简单来说，如果您的 div 包含任何内容，那么您的 div with margin 移动如下所示 snippet.div with margin 在所有四个边上都有 100px 的边距，如果您想给任何特定边留边距，你可以使用 (margin-top, margin-bottom, margin-right or margin left.)

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

<div>This is initial div</div>

在 <div1> 上应用保证金

Applying margin on <div1>

html

css

frontend

web-frontend