Question

我正在尝试为DIV中的元素添加填充。我的问题是它将此填充添加到我的DIV的总大小。

我尝试使用以下代码停止此操作：

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;

它在Chrome上运行正常，但我仍然遇到Firefox问题。我不明白为什么。

任何人都知道如何解决这个问题？

非常感谢

Answer 1

如果要在div的宽度上添加额外的填充：

div {
    // In this example total div width is 120px
    // box-sizing: content-box is the default style. No need to specify it.
    width: 100px
    padding: 0 10px;
}

或者如果你想制作总div宽度的填充部分：

div { 
    // In this example total div width is 100px
    // support Firefox, WebKit, Opera and IE8+
    -moz-box-sizing: border-box;
    box-sizing: border-box; //always place the standard declaration last, so it overwrites browser specific ones in case they get deprecated  
    width: 100px
    padding: 0 10px;
}

填充在Firefox上使用box-sizing改变div的大小

1 个答案: