Css 如何对齐'；n'；用边距/填充物水平分割？

我有以下HTML：

 <div class="top_buttons">

    <div class="top_button">
        <img src="img/image1.png">
    </div>

    <div class="top_button">
        <a href="#">
            <img src="img/image2.png">
        </a>
    </div>

    <div class="top_button">
        <a href="#">
            <img src="img/image3.png">
        </a>
    </div>

</div>

当我想给内部div（即图像的父级）添加一些边距和/或填充时，问题就出现了。如果我在这些div中添加边框/填充/边距，我设置的上述33.333%将不再有效，因为很明显，每个“top_button”div不仅包含图像，还包含添加到div中的边框/填充/边距

所以，我的临时解决办法是将这个百分比降低到31%左右。但是，根据手机的不同，屏幕右侧会保留更多或更少的像素，因为我只是想猜测div的长度以及额外边框/填充/边距的百分比。我想要的是一个解决方案，即使我将边框/填充/边距设置为内部div，我仍然可以使用33.333%，这样我就可以实现像素完美的水平对齐

---

简而言之，我如何水平对齐'n'div，知道div也有边框/填充/边距，并且我不知道“top_button*s*”div的总宽度（因为显示器的宽度根据手机屏幕的不同而不同）.

当前的标准盒子模型行为就是您在问题中描述的。如果定义宽度，并不意味着元素的宽度仅与宽度值相同。而不是填充，等等。添加到它

为了实现更直观的行为，您需要一个备用的长方体模型。现在，如果你定义宽度，你真的定义了所有可能的填充，边框等宽度

下面的CSS正是您所需要的。请注意，此CSS将为所有元素启用备用框模型。您也可以只为所需的元素定义它们，尽管您需要在一个项目中处理两种不同的方法

*, ::before, ::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

---

当前的标准长方体模型行为就是您在问题中描述的。如果定义宽度，并不意味着元素的宽度仅与宽度值相同。而不是填充，等等。添加到它

为了实现更直观的行为，您需要一个备用的长方体模型。现在，如果你定义宽度，你真的定义了所有可能的填充，边框等宽度

下面的CSS正是您所需要的。请注意，此CSS将为所有元素启用备用框模型。您也可以只为所需的元素定义它们，尽管您需要在一个项目中处理两种不同的方法

*, ::before, ::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

---

使用盒子大小。长方体大小允许您添加填充和边框，而无需担心打断宽度。但是，边距仍会破坏对齐。为了计算边距，您需要从元素的宽度中减去边距的数量

.top_button{
     float: left;
     width: 33.333%;
     -moz-box-sizing: border-box;      
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
 }

---

使用盒子大小。长方体大小允许您添加填充和边框，而无需担心打断宽度。但是，边距仍会破坏对齐。为了计算边距，您需要从元素的宽度中减去边距的数量

.top_button{
     float: left;
     width: 33.333%;
     -moz-box-sizing: border-box;      
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
 }

---

如果在框大小方面遇到跨浏览器兼容性问题，这里有一个替代方案。每个按钮都需要一个额外的“内部”div，您可以将边距应用到该div

HTML:

---

这里有一个解决方案。

如果您在框大小方面遇到跨浏览器兼容性问题，这里有一个替代方案。每个按钮都需要一个额外的“内部”div，您可以将边距应用到该div

HTML:

---

这是一个例子。

这很有效。谢谢+1代表“保证金仍将打破对齐”。这非常有效。谢谢+1表示“边距仍将破坏对齐”。+1表示“当前的标准长方体模型行为是您在问题中描述的。”我不知道长方体大小的问题。太有用了！谢谢+“当前的标准盒子模型行为就是您在问题中描述的。”我不知道盒子大小的事情。太有用了！谢谢

.top_button {
  float: left;
  width: 33.333%;
}

.top_button .top_button_contents {
  position:relative;
  margin:0px 10px 0px 0px;
  background-color:#CCC;
}

.top_button.last .top_button_contents {
 margin:0px;
}