box-sizing 屬性在 Microsoft Edge 上不起作用

Question

我在其中制作了一個父 div 和三個子 div，我想通過 float 使三個子連續，並且彼此之間有一些邊距，我將 box-sizing 屬性設置為 border-box，但該屬性沒有工作，所以 margin 屬性值被添加到 width 值，如圖所示，問題是什么？

 * { margin: 0px; padding: 0px; -webkit-box-sizing: border-box; box-sizing: border-box; } div.child { float: left; background-color: black; width: 200px; margin: 8px; text-align: center; color: white; }

 <div> <div class="one child">one</div> <div class="two child">two</div> <div class="three child">three</div> </div>

Answer 1

所有盒子模型都添加了margin 。 只能包含border和padding 。

此外，您不應在 2022 年嘗試使用float實現布局。

使用 flex box，或者 CSS 網格：

 * { margin: 0; padding: 0; box-sizing: border-box; }.child { background-color: black; text-align: center; color: white; }.parent { display: grid; grid-template-columns: repeat(3, 200px); gap: 8px; }

 <div class="parent"> <div class="child">one</div> <div class="child">two</div> <div class="child">three</div> </div>