添加填充而不更改总宽度

Question

如何在不添加预定义宽度的情况下向元素添加填充？

最好定义列的宽度,以便为布局创建一个干净的网格; 但也想在列内的内容中添加填充.有什么方法可以指明吗？

Answer 1

element { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Answer 2

使用box-sizing,它使填充包括:https: //developer.mozilla.org/en-US/docs/CSS/box-sizing

例:

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

值得注意的是,这不适用于IE7.

对于IE8,请参阅此问题的最佳答案:box-sizing:border-box => for IE8？