1

根据标准，在 CSS 中向 HTML 元素添加填充将使元素按定义的数量增长。例如：

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

将向 .elem 的边添加 20 像素，导致实际宽度和高度总计为 140 像素。

由于这在网页设计中实际上是非常不切实际的（必须计算并跟踪结果大小），我想知道是否可以反过来做。我设置了一个填充，内部文本区域反而缩小了。所以元素保持在 100*100px，内部有 20px 的填充，我不必担心在试验填充时会弄乱我的设计。

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

4

2 回答 2

3

使用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-14T21:55:18.373 回答
0

目前不可能执行您所追求的。在尝试定义 css 'width' 值之前，您必须考虑总宽度的填充。有关这方面的更多信息，请参阅CSS 盒子模型。这是保证在所有支持 Web 的设备（CSS3 兼容和不兼容）中正确调整大小的唯一方法。

于 2013-02-14T22:01:47.247 回答