在 calc 中使用最大内容

Question

假设我有一个 <div>，里面有一些 <p>：

#myDiv {
  width: max-content;
  border-style: dashed;
}

<div id="myDiv">
    <p>This is my text</p>
</div>

但我不喜欢文本太接近 border，所以我尝试了这个：

#myDiv {
  width: calc(max-content + 2px);
  border-style: dashed;
}

<div id="myDiv">
  <p>This is my text</p>
</div>

但是（如您所见）它没有用。

---

所以我的问题是，是否有办法创建宽度为

的 <div>

Two pixels more than the content in it

自从我尝试了

calc(max-content + 2px)

没有成功。

提前谢谢你。

Answer 1

很遗憾，您不能将 max-content 关键字与 calc()

一起使用

我对你的问题的解决方案是使用填充：

#myDiv {
  width: max-content;
  padding-inline: 2px;
  border-style: dashed;
}

<div id="myDiv">
  <p>This is my text</p>
</div>

Answer 2

您可以将 div 设置为像 inline-block 元素一样运行并向其添加 padding: 2px。我认为它会像你想要的那样工作。 所以，这是代码：

#myDiv {
  display: inline-block;
  padding: 0 2px;
  border-style: dashed;
}

<div id="myDiv">
  <p>This is my text</p>
</div>