css - 有没有办法让文本粘在 div "border"上？

Question

我一直在尝试找到一种方法来产生与常见的“粘在容器顶部”类似的效果，但我试图让它始终粘在容器的边界而不是顶部在同一个地方，但当分辨率改变时，我一直让文本不断移动: 在 Higher resolutions它停留在正确的位置，但是当 resolution diminishes或获取 way to high ，文本开始围绕容器跳舞。
澄清一下，我正在为容器使用 styled-components，为文本使用 inline-css，我已经尝试过使用 screen.size 的“响应式”css 在屏幕尺寸发生变化时更改 marginTop，但它似乎没有有效或对浏览器友好，而且阅读起来也很困惑，所以我希望有更好的方法来做到这一点，如果这个问题看起来很愚蠢和/或已经得到回答，我很抱歉，我已经搜索了很多关于它，但没有找到适合上下文和工作的任何内容。

.fieldset{
  width: 97%;
  margin: auto;
  background: #00000000;
  padding: 1%;
  border-radius: 5px;
  border: 3px solid gray;
  min-height: 50px;
}

.title{
  margin-top: -1rem;
  font-family: "Helvetica";
  color: "grey";
  background: "white";
  width: 10em;
}

<div class="fieldset">
<h3 class="title">
        Title
      </h3>
      <p>a</p>
</div>

Answer 1

您的内边距正在改变，因此您无法控制它。如果你真的想要动态填充，你必须将它们设置为相同的值，如 1vw，并且它们计算 .title 的位置，如 calc(-12px - 1vw);

.fieldset{
  width: 97%;
  margin: auto;
  background: #00000000;
  padding: 1vw;
  border-radius: 5px;
  border: 3px solid gray;
  min-height: 50px;
}

.title {
    margin: 0;
    position: relative;
    top: calc(-12px - 1vw);
    font-family: "Helvetica";
    width: 10em;
}

<div class="fieldset">
<h3 class="title">
        Title
      </h3>
      <p>a</p>
</div>