有没有办法让文本坚持 div "border"？

Question

我一直在努力寻找一种方法来产生与普通 "stick to the top of a container" 类似的效果，但我试图让它始终粘在容器的边界上，而不是在顶部同一个地方，但当分辨率改变时，我一直让文本不断移动：在 Higher resolutions it stays in the right place, but when the resolution diminishes or get way to high 中，文本开始围绕容器跳舞。
澄清一下，我使用 styled-components 作为容器，使用 inline-css 作为文本，我已经尝试 "responsive" css 使用 screen.size 来改变 marginTop当屏幕尺寸发生变化时，但它似乎根本没有效果或对浏览器不友好，而且阅读起来也很混乱，所以我希望有更好的方法来做到这一点，如果这个问题看起来很愚蠢，我很抱歉and/or 已经回答了，我已经搜索了很多，但没有找到适合上下文和工作的内容。

.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>

Answer 2

绝对定位

注意：父元素上的`padding* 需要调整。

.fieldset {
  margin: 2em 1%;
  background: #00000000;
  border-radius: 5px;
  border: 3px solid gray;
  min-height: 50px;
  position: relative;
}

.title {
  margin: 0;
  font-family: "Helvetica";
  color: "grey";
  background: "white";
  width: 10em;
  position: absolute'
 top:0;
  border: 1px solid red;
  transform: translateY(-50%);
}

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

有没有办法让文本坚持 div "border"？

Is there an way to make text stick to div "border"?

css

styled-components