使用em和px设置CSS样式中的padding

Question

是否可以使用像素和em进行填充？例如，我可以通过2em加1px来添加padding-left吗？就像这样...

padding-left: 2em + 1px;

- Berry Blue

---

您不能......而以下做法可能解决您的问题：padding-left: 2em 和 margin-left: 1px 或者反过来。 - Mr_Green

不，你不能这样做。 - Selvamani

你可以使用类似于LESS CSS的工具，但这可能有点过于复杂了。 - DACrosby

Answer 1

你正在寻找calc表达式。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc 例如：

padding: -webkit-calc(2em + 1px);
padding: calc(2em + 1px);

在撰写本文时，需要注意的是，该属性仍被视为实验性质。您可能需要检查caniuse，以确定您所开发的所有浏览器是否都支持这个表达式。

- uber5001

---

注意：确保在值和 + 之间留有空格。 - uber5001

一些额外的链接：http://www.w3.org/TR/css3-values/#calc，http://caniuse.com/calc :) - G-Cyrillus

Answer 2

你可以像这样做：

您可以像这样做：

<div id="el">asdfasd</div>

---

#el {
    background-color:green;
    padding-left: 2em;
    margin-left: 1px;
}

工作的Fiddle

- Mr_Green

---

为什么要使用绝对定位？为什么不只是让父元素使用 padding-left: 1px，子元素使用 padding-left: 2em（或反之亦然）？在这种情况下，绝对定位并不是你想要的。 - uber5001

@uber5001 你正在将 padding-left: 1px; 应用于父元素。我只是通过拉伸子元素并使用父元素进行必要的调整。 - Mr_Green

这甚至都不起作用。我尝试了你的fiddle。我在子div中添加了文本。子元素甚至没有填充；盒子只是变得更宽了。你已经将子元素拉伸到父元素上，有效地去除了填充效果。结果是宽度增加了2em+1px，而不是添加填充。 - uber5001

最后一个超级挑剔的问题：为什么不在#parent中使用padding-left: 1px;而是在#child中使用margin-left: 1px？问题确实要求填充，而不是边距。 =) - uber5001

@uber5001 哈哈，这个技巧是一样的。你可以说我只是更专注于子元素。 :) （实际上，在这里没有必要使用父元素，只是为了显示存在 1px 的虚拟填充） - Mr_Green

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/31751/discussion-between-uber5001-and-mr-green - uber5001