我如何在边界上方获得 h1答案

【问题标题】：How do I get h1 above border我如何在边界上方获得 h1
【发布时间】：2017-01-07 10:15:08
【问题描述】：

我正在编写一个免费的 PSD 到 HTML 并且一切都很好，除了一件事 - 我不知道如何得到这样的东西：

如何让 h1 高于边界，以便覆盖其中的一部分？可以用纯 CSS 做还是我用 JS 做？

【问题讨论】：

您是否尝试使用负边距？不要忘记将 h1 作为显示内联而不是块发送

【解决方案1】：

legend {
  padding: 1em;
  margin-left: calc(50% - 3em);
}

<fieldset>
  <legend>Test</legend>
</fieldset>

【讨论】：

是的，这正是我想要的 :) 但我还有一个问题 - 我应该更改什么属性来增加从文本到边框的左右边距？
图例 {padding-left: X; padding-right:Y}，并将文本左边距居中：clac(50% - Z)，其中 Z = [标题长度] / 2

【解决方案2】：

body{
  background:white;
}
fieldset {
      display: block;
      margin: 20px 1%;
      margin-bottom: 20px;
      padding: 0 auto;
      padding: 15px 0;
      border: 0;
      border: 1px solid #000;
      width: 98%;
      background:white;
      color:black;
}

fieldset:last-of-type {
      margin-bottom: 0px;
}

legend {
     display: table; 
     min-width: 0px;
     max-width: 70%;
     position: relative;
     margin: auto;
     padding: 5px 20px;
     color: #000;
     font-size: 20px;
     text-align: center;
}

fieldset div{
  margin:0 auto;
  text-align:center;
  width:50%;
  //border:thin red solid;
  font-size:12px;
}

    <fieldset>
        <legend align="center" >About Us</legend>
          <div>
            When You work with us... content
          </div>
    </fieldset>

你在找这个吗？

这里是JSFiddle

希望这会有所帮助。

【讨论】：

和<form>一起做对我来说没有语义，还有其他方法吗？
是的，这正是我想要的 :) 但我还有一个问题 - 我应该更改什么属性来增加从文本到边框的左右边距？
@Mahaveersharma .. 我已经更新了答案。请检查。
JSfiddle: link - 现在我有这样的东西，效果很好，但我必须从“”更改左右边框以适应更长的文本。我该怎么做？
好的，我已将页边距更改为较小的页边距，并为其他部分制作了另一个课程，看起来不错，感谢您的所有帮助:) 更新小提琴：link

【解决方案3】：

也许用一些常规标签（不反对语义）和弹性你可以做到：

div {
  magin: 2em;
  margin-top: 2em;
  border: solid;
  border-top: 0;
  padding: 1px;
  text-align: center;
}
h1 {
  margin-top: -0.6em;
  display: flex;
  align-items: center;
}
h1:before,
h1:after {
  content: '';
  flex: 1;
  border-bottom: solid;
  margin: auto -3px auto 2em;
}
h1:before {
  margin: auto 2em auto -3px;
}
p {
  padding: 1em;
}
/* do i see through ? */

body {
  background:linear-gradient(to bottom left, gray,yellow,purple,gold,pink,tomato);

<div>
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>

</div>

【讨论】：

【解决方案4】：

你可能正在寻找这个

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

样式是

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

CSS在链接中给出

jsfiddle

【讨论】：

这也是一个很好的解决方案，但是当我从 h1 中删除背景时，边框是可见的。有什么解决办法吗？
不，没有解决办法。
请avoid link only answers。答案“仅是指向外部网站的链接”may be deleted。