Question

我有两个div元素和nav > nav_1。当我向margin-top:20px;添加nav时，nav根据正确的正文向下20px。
但是，当我将此margin-top:20px;添加到nav_1时，nav_1根据正文20px nav下降。为什么？ nav_1的{{1}}元素，它应根据nav移动在那个问题我正在寻找解释

nav

.nav {
  height: 500px;
  width: 500px;
  background-color: black;
  margin-top:50px;
}
.nav .nav_1 {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin-top:50px;
}

Answer 1

这是＆＃34;保证金崩溃的一个案例＆＃34;机制。简而言之，父元素和子元素的边距会折叠成单个边距，大小等于其相应边距的最大值。有几种方法可以禁用这种行为，例如：向父元素添加边框或填充。您可以在mdn article了解有关该机制的更多信息。

Answer 2

您可以在vec2 v = 2.0f * otherVector;上使用padding并移除nav上的margin

或

您可以在.nav .nav_1
中添加display:inline-block

＆＃13;
＆＃13;
.nav .nav_1
＆＃13;
.nav { height: 500px; width: 500px; background-color: black; } .nav .nav_1 { height: 50px; width: 50px; background-color: blue; margin-top:20px; display:inline-block; }
＆＃13;
＆＃13;
＆＃13;

Answer 3

继@Paul Kozlovitch回答，要解决此问题，您可以设置父enum state { STATE_1, STATE_2, STATE_3, STATE_4, STATE_5, STATE_6, STATE_7, STATE_8, }; state f(int a, bool b, const std::string& str) { // How not to: if (a < 0) return b == true ? (str == "morning" ? STATE_4 : STATE_3) : (str == "morning" ? STATE_2 : STATE_1); else // a >= 0 return b == true ? (str == "morning" ? STATE_8 : STATE_7) : (str == "morning" ? STATE_6 : STATE_5); } int main() { std::cout << "State: " << f(1, true, "morning") << std::endl; }（或display:inline-block等）。

＆＃13;

float

＆＃13;

.nav {
  height: 500px;
  width: 500px;
  background-color: black;
  margin-top:50px;
  display:inline-block;
}
.nav .nav_1 {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin-top:50px;
}

＆＃13;

div元素无效

3 个答案: