CSS填充同时保留定义的大小？

根据标准，向CSS中的HTML元素添加填充将按定义的量增加元素。例如：CSS填充同时保留定义的大小？

.elem { 
    width: 100px; 
    height: 100px; 
    padding: 20px; 
}

将增加20个像素.elem的两侧，从而使实际宽度和高度是140px总。

由于这实际上是非常不实际的网页设计（不得不计算和跟踪所得的大小），我想知道是否有可能做反向代替。我设置了填充，而内部文本区域缩小了。所以元素保持在100 * 100px，其内部填充20px，并且我不必担心在试验填充时搞乱了我的设计。

这可能吗？也许通过一种编译为CSS的语言（并没有深入研究）？也许还有一个更小的问题：为什么它首先以这种方式工作？

来源

2013-02-14 DaVince

使用box-sizing：

elemSelector { 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

这对属性值声明元素的声明大小将包括border和padding。

参考文献：

来源

2013-02-14 21:55:18

哇。 CSS3正好介绍了这一点？它似乎全面兼容（显然，在现代浏览器中）。非常感谢让我意识到这一点。将在7分钟内将您的答案设置为已接受。 :) – DaVince 2013-02-14 21:58:46

你真的很受欢迎，我很高兴有帮助！ =） – 2013-02-14 22:53:27

目前您无法执行您的任务。在你尝试定义你的css'width'值是什么之前，你必须考虑总宽度的填充。欲了解更多信息，请参阅CSS Box Model。这是唯一可以保证所有支持网络的设备都可以正确调整大小的方法，而CSS3兼容而不是。

来源

2013-02-14 22:01:47

感谢您的回复。我知道CSS盒子模型，但只是希望它的工作方式不同。然而，我要求的东西似乎是可能的 - 大卫托马斯用CSS3解决方案发布了一个答案，经过快速测试，它似乎正在做我试图解释的内容。 – DaVince 2013-02-14 22:05:04

CSS填充同时保留定义的大小？

回答

相关问题