Css 为什么我仍然有一个右边距，当我把它设置为0的时候？

我创建了这个，这样你就可以看到我在说什么。我想要的是让“空车”按钮正好位于total下方，但由于某些原因，有一个右边距将其推到了不合适的位置。我将该元素的边距设置为零，并且在inspector中没有看到它被覆盖，但是仍然有一个右边距。如果我尝试将其向右浮动，边距会消失，但会弄乱按钮在其下方的位置。另一个问题是我有最后一个商店项目与img失踪。不知什么原因，它不合适。我一直不明白为什么它比其他的稍低

以下是空购物车按钮的样式：

#emptyCartBtn{
  display: block;
  font-size: 0.67em;
  font-weight: 100;
  border: none;
  color: white;
  margin: 0px;
  background-color: transparent;
}

这是html格式的

<div id="cartBottom">
  <label id="total">
    <span>Total: $</span><span>0.00</span>
  </label>
  <input type="button" value="Empty Cart" id="emptyCartBtn" >
  <input type="button" value="Confirm Purchase" id="purchaseBtn">
</div>

---

这并不是创造空间的边缘。它上面的标签和按钮比页面上显示的宽很多，标签是

text align:right

。如果删除

text align

，您将看到文本在各个元素的左侧对齐

您可以将这些元素向右浮动，然后清除：向右，这样就不会弄乱布局。然后，如果您想让空购物车按钮与上面/下面的元素齐平，请删除它的

填充

或只是

向右填充

或任何您想要的内容

正文{
字体系列：无衬线；
边际：0px；
}
img{
最大宽度：100%；
高度：自动；
}
h1{
背景色：#32C996；
颜色：白色；
宽度：210px；
字体系列：无衬线；
边缘底部：0px；
左边距：60像素；
文本对齐：居中；
}
氢{
边缘底部：0px；
字号：900；
}
h4{
边际：0px；
字号：100；
}
人力资源{
边界：0；
高度：2倍；
背景：白色；
左边距：30px；
}
.商店物品{
显示：内联块；
宽度：250px；
高度：340px；
边框：1px实心#32C996；
文本对齐：居中；
保证金：20px 20px 0px 0px；
}
.ShopItem img{
高度：170px；
宽度：220px；
}
.水果名{
显示：块；
字体大小：粗体；
}
.价格{
字体大小：-webkit xxx大；
}
.股票{
字体大小：较大；
}
因斯托克先生{
保证金：10px 0px 10px 0px；
字号：500；
}
.addToCartBtn{
宽度：190px；
高度：40px；
字体大小：较大；
背景色：#32C996；
边界：无；
边界半径：10px；
}
.cartItem{
高度：95px；
背景色：#6FD9B5；
边缘底部：15px；
填充：10px 10px 10px 25px；
}
.cartItem img{
宽度：80px；
高度：60px；
显示：内联块；
}
.数量{
位置：相对位置；
底部：12px；
显示：内联块；
}
.伯爵{
颜色：黑色；
字号：x大号；
}
.countBtn{
/*宽度：20px；
高度：17px*/
字体大小：大号；
填充顶部：0px；
垫底：0px；
边框颜色：透明；
边框样式：无；
背景色：白色；
左边距：10px；
右边距：10px；
}
.下半身{
颜色：黑色；
}
.下半部标签{
字体大小：小；
字号：800；
}
.deleteBtn{
边界：0；
颜色：白色；
浮动：对；
字号：中等；
背景色：透明；
}
#主要内容{
宽度：1450px；
最小高度：800px；
显示器：flex；
保证金：0px 60px 0px 60px；
}
#商店{
填充底部：50px；
}
#购物车{
颜色：白色；
最小宽度：350px；
背景色：#32C996；
}
#店主{
文本对齐：居中；
}
#总数{
边际：0px；
显示：块；
文本对齐：右对齐；
字号：900；
字体大小：0.90em；
}
#空电池{
显示：块；
字号：0.67em；
字号：100；
边界：无；
颜色：白色；
边际：0px；
背景色：透明；
}
#采购业务{
宽度：190px；
高度：40px；
颜色：黑色；
边界：无；
字号：900；
字号：中等；
边缘顶部：15px；
边缘底部：25px；
边界半径：10px；
背景色：#C0EFDF；
}
#车底{
浮动：对；
右边距：15px；
}
#容器{
边框顶部：5px实心#32C996；
宽度：100%；
}
#车底>*{
浮动：对；
清楚:对,；
}
#空电池{
填充：0；
}

水果香蕉$1.25 10 Stockapple$2.5 5 Stockraspberry$4 2 Stockkiwi$3.33 15 Stockvery delicious菠萝长名$4.75 1 Stock草莓$2.05 3 StockShopping Cart$2 items0@$4每个=$0.000@$3.33每个=$0.00
总计$0.00

您的菠萝文本有两行，而草莓文本只有一行，导致它们无法对齐。使你的菠萝文本只有一行，它将解决草莓项目不排队的问题。我通过在上面提到的按钮上添加左边距来修复它。请检查。@Darkisa谢谢，关于导致商店商品错位的两行文字，您是对的。如果我想保留这两行文字，有没有办法不影响布局？我能想到的最快的方法是为css中的标签设置最小高度，例如标签{min height:50px}。然后，由于标签的高度增加，标签下面的元素将被稍微向下推到div的底部。在这种情况下，您只需要稍微扩展div或使标签下面的元素稍微变小。希望这有帮助。

.ShopItem{
  display: inline-block;
  width: 250px;
  height: 340px;
  border: 1px solid #32C996;
  text-align: center;
  margin: 20px 20px 0px 0px;
}