Html 为什么即使使用百分比，保证金权利也比其他权利更长

HTML代码：

<div id='boxA' class='box' :class="{boxRed : Aselected}" @click='change("A")'></div>

<div id='boxB' class='box' :class="{boxRed : Bselected}" @click='change("B")'></div>

<div id='boxC' class='box' :class="{boxRed : Cselected}" @click='change("C")'></div>

输出：

在开发者控制台中，计算出的margin的CSS值在所有方面都是相同的。

---

但它似乎有点偏右？有什么问题吗？

如果你把宽度和边距加起来，结果是70%。使用左边距，因为元素向左浮动。这意味着在右边，在10%的左边距和50%的宽度之后，仍然有30%是左边距。这就是为什么右边的边距看起来更大

---

您可以在左侧使用25%的边距，或使方框居中，以便居中。或者另一种方法：将左右边距设置为

auto
Youir
margin:10%
是问题的根源。将其更改为
margin:10%自动。所以它的中心非常完美。就这样

.box {
  width: 50%;
  margin: 10% auto;
  padding: 10%;
  border: 2px dotted grey;
  border-radius: 5px;
}

这不是关于保证金的权利更长。这是关于所有元素都是左对齐的

您可以在
.box
中将边距属性设置为
自动
，使元素水平居中

margin: 10% auto;

元素将占据指定的宽度，剩余的空间将在左右边距之间平均分配

更新的代码片段：-


.box{
宽度：50%；
利润率：10%自动；
填充：10%；
边框：2个点灰色；
边界半径：5px；}

50%+2*10%+2*10%=90%<100%，因此您的元素将位于左侧，除非您将Denic Juric的答案加在中间；制造sense@NabeelAron如果以后必须修改
框
宽度
，指定百分比将导致额外的工作。So
保证金：10%自动总是一个更好的选择。很乐意帮忙！
margin: 10% auto;