Question

在以下代码中，当我为margin-top指定#thirdDiv时，直到我给它36px时它才起作用。

原因是什么？

#Container {
  border: 15px solid orange;
  width: 350px;
}

#firstDiv {
  display: inline-block;
  border: 1px solid red;
  font-size: 1em;
}

#secondDiv {
  border: 1px solid green;
  display: inline-block;
  font-size: 2em;
}

#thirdDiv {
  display: inline-block;
  border: 1px solid pink;
  font-size: 1em;
  margin-top: 36px;
}

<div id="Container">
  <div id="firstDiv"> a </div>
  <div id="secondDiv"> b </div>
  <div id="thirdDiv"> c </div>
</div>

Answer 1

因为您的Container元素的子元素基于该div的底部。如果将vertical-align: top添加到子元素，则任何margin-top都是可能的。您可以在此CodePen中进行尝试，在这里我复制了您的代码并整理了CSS。请注意，您可以选择仅将vertical-align: top放入#thirdDiv元素中。这样，您可以将其他两个div保持在原始位置。

Answer 2

您正在寻找的是填充。 CSS页边距属性用于在任何定义的边界之外的元素周围创建空间，而CSS填充属性用于在任何定义的边界内部的元素内容周围生成空间。

请尝试以下操作，而不是将margin-top应用于#thirdDiv。

#Container {
	padding-top: 36px;
	border: 15px solid orange;
	width: 350px;
}
#firstDiv {
	display: inline-block;
	border: 1px solid red;
	font-size: 1em;
}
#secondDiv {
	border: 1px solid green;
	display: inline-block;
	font-size: 2em;
}
#thirdDiv {
	display: inline-block;
	border: 1px solid pink;
	font-size: 1em;
}

<div id="Container">
	<div id="firstDiv"> a </div>
	<div id="secondDiv"> b </div>
	<div id="thirdDiv"> c </div>
</div>

Answer 3

您必须为margin-top指定一个值，否则它将不知道要添加多少利润。

margin-top之前为margin-top: ;键入了什么？

您想要的效果是什么？

为什么行内边界值小于特定值对内联块元素不起作用？

3 个答案: