Html 我如何到达边界以上的h1

我正在将一个免费的PSD编码为HTML，除了一件事之外，一切都很好-我不知道如何获得这样的东西：

如何使h1位于边界上方，以便它可以覆盖其中的一部分？它可以用纯CSS来完成吗？或者我可以用JS吗？

正文{
背景：白色；
}
字段集{
显示：块；
利润率：20px1%；
边缘底部：20px；
填充：0自动；
填充：15px0；
边界：0；
边框：1px实心#000；
宽度：98%；
背景：白色；
颜色：黑色；
}
字段集：类型的最后一个{
边缘底部：0px；
}
传奇{
显示：表格；
最小宽度：0px；
最大宽度：70%；
位置：相对位置；
保证金：自动；
填充：5px20px；
颜色：#000；
字体大小：20px；
文本对齐：居中；
}
字段集分区{
保证金：0自动；
文本对齐：居中；
宽度：50%；
//边框：细红色实心；
字体大小：12px；
}

关于我们
当你和我们一起工作的时候。。。内容

图例{
填充：1em；
左边距：计算（50%-3em）；
}

试验

您可能正在查找此

<div>
   <h1>Some Text</h1>
    <p>Some text also</p>
</div>

CSS在链接中给出

---

也许通过一些常规标记（不违反语义）和flex，您可以做到：

div{
magin:2米；
边缘顶部：2米；
边框：实心；
边界顶部：0；
填充：1px；
文本对齐：居中；
}
h1{
边缘顶部：-0.6em；
显示器：flex；
对齐项目：居中；
}
h1：之前，
h1：之后{
内容：''；
弹性：1；
边框底部：实心；
利润率：自动-3px自动2em；
}
h1：之前{
保证金：自动2em自动-3px；
}
p{
填充：1em；
}
/*我能看穿吗*/
身体{
背景：线性渐变（至左下角，灰色、黄色、紫色、金色、粉色、番茄色）；

HTML Ipsum呈现
佩朗茨克居住者莫比·特里斯蒂克塞内特斯和马莱苏达著名的埃吉斯塔。前庭侵权人码头、封建维塔伊、尤里西斯·埃吉特、临时住所埃米特、ante。不要让欧盟自由人坐在埃吉斯塔广场上。埃涅亚尤里西斯·埃斯特斯特和莫里斯
Placelat eleifend leo.Quisque sit amet est et sapien ullamcorper pharetra.前庭，调味品sed，
commodo vitae
，ornare sit amet，wisi.Aenean发酵剂，Elite eget tincidunt调味品，eros ipsum rutrum orci，sagittis
猫的丘脑底面快动症

佩伦特斯克居住者莫比·特里斯蒂克·塞内特斯和马莱苏达是一位著名的屠夫。前庭侵权者，世袭者，遗赠者，临时的遗赠者，安提斯。不允许欧盟自由人坐在遗赠者的面前。
莫里斯·普莱斯特拉特·埃利芬德·利奥

处理

对我来说没有任何意义，还有其他方法吗？是的，这正是我想要的：）但我还有一个问题-我应该更改什么属性来增加从文本到边框的左右边距？@Mahaveersharma..我已经更新了答案。请检查。JSfiddle:-现在我有一些问题我喜欢这样，而且效果很好，但我必须将左右边框从“”更改为适合更长的文本。我该怎么做？好的，我已经将边距更改为更小的边距，并且为其他部分创建了另一个类，看起来很好，谢谢您的帮助：）更新的小提琴：是的，这正是我要找的：）但我有一个矿石问题-我应该改变什么属性来增加文本到边框的左右边距？图例{padding left:X；padding right:Y}，对于居中的文本边距left:clac（50%-Z），其中Z=[标题长度]/2这也是一个很好的解决方案，但当我从h1中删除背景时，边框是可见的。有什么解决方案吗？没有，没有解决方案。请回答“仅仅是一个指向外部站点的链接”。你是否尝试使用负边距？别忘了将h1作为显示内联发送，而不是阻止

div{
    border:1px solid #000;
    text-align:center;  
}
div h1{
    background:#fff;
    margin-top:-20px;
    width:200px;
    margin-left:auto;
    margin-right:auto;
 }