style.marginRight 的工作方式与 style.marginLeft 不同

Question

第一个函数将内容推送到左侧，而第二个函数不将其推送到右侧

function openNavLeft() {
  document.getElementById("mySidenavLeft").style.width = "100vw";
  document.getElementById("main").style.marginLeft = "100vw";
}

function openNavRight() {
  document.getElementById("mySidenavRight").style.width = "100vw";
  document.getElementById("main").style.marginRight = "100vw";
}

所以我的问题是我应该做些什么不同或者为什么会这样？

Answer 1

您正在向元素的左侧添加边距（为了安全起见，左侧说是 div）。

如果没有边距，则 div 将尽可能靠近左侧，因为它是用从左到右的语言制作的。

如果你在左边添加一个边距，它会将“div”推到右边，因为如果填充了左边的空间。

如果你在右边添加一个边距，你只是在填充“div”之后的空间，所以它不必移动到任何地方。

如果您在 'div' 之前有占用空间的内容，则右边距不会将其移开。

我添加了一个小图表，希望对我的解释有所帮助。

----------------------
|       WEBPAGE      |
|                    |
|[div]               |
|                    |
|[   Left Margin    ]|[div] 
|                    |
|[div][ Right Margin |    ]
|                    |
|[img][div][   Right | Margin ]
|                    |
----------------------

?