在计算中使用最大内容

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>宽度为

比其中的内容多两个像素

自从我尝试过

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>