如何在html中将文本添加到边框线

目前我正在学习html和css，这个问题可能还不清楚

问题是，我想在子边框行的顶部添加文本（广告），但它不符合要求。请查看代码行下方的图像，并请指导我在css代码中可能对您毫无意义的边距属性

#父框{
边框：2倍纯红；
高度：180像素；
宽度：自动；
}
#儿童箱{
背景#f2f2；
身高：70%；
边框：2倍实心#F2F2；
利润率：20px 70px 20px 340px；
}

广告
`

尝试将字体大小和行距设置为相同的值。如果它仍然没有接触到边缘，您可以尝试降低线条高度。但是，如果这是针对多行的段落内容，则内容会很拥挤，并且会影响可读性。

这里有一个快速答案，说明您需要显示什么，但还有其他方法可以做到这一点：）

#父框{
边框：2倍纯红；
高度：180像素；
宽度：自动；
}
#儿童箱{
背景#f2f2；
身高：70%；
边框：2倍实心#F2F2；
利润率：0.70px 20 px 340px；
}
#头衔{
利润率：20px 70px 0px 340px；
}

广告
`

所以我尝试了你的问题，下面是解决方案。 加上 [span style=“位置：绝对；页边距顶部：-18px；”]广告[/span] 我希望这能解决你的问题

下面是解决方案

CSS:

#父框{
边框：2倍纯红；
高度：180像素；
宽度：自动；
}
#儿童箱{
背景：-moz线性梯度（顶部，rgba（255255,0）0%，rgba（255255,0）13%，rgba（242242,1）14%，rgba（242242,1）100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，rgba（255255255,0）0%，rgba（255255255,0）13%，rgba（242242,1）14%，rgba（242242,1）100%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（到底部，rgba（255255,0）0%，rgba（255255,0）13%，rgba（242242,1）14%，rgba（242242,1）100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00ffffff'，endColorstr='#F2F2F2F2F2'，GradientType=0）；/*IE6-9*/
身高：70%；
利润率：20px 70px 20px 340px；
}

HTML:

广告

Margin属性用于从父元素而不是从其中的文本给出元素边距。如果要这样做，您必须使用填充，但不能将文本移动到div的边框上方，因为您正在div内部写入文本。为此，您应该在div上方而不是在div内部写入文本。

<style>
#parentBox {
  border: 2px solid red;
  height: 180px;
  width: auto;
}

#childBox {
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 13%, rgba(242,242,242,1) 14%, rgba(242,242,242,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 13%,rgba(242,242,242,1) 14%,rgba(242,242,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 13%,rgba(242,242,242,1) 14%,rgba(242,242,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
  height: 70%;  
  margin: 20px 70px 20px 340px;
}
</style> 

<div id="parentBox">
  <div id="childBox">advertisement</div>
</div>