html - 为什么我不能在不破坏内容的情况下为其添加标签？

Question

我正在尝试的新站点上有以下“录音框”代码:

http://codepen.io/Winger15mk/pen/grjXoE

html {
  background: red;
}
.mybox {
  margin-top: 20px;
  position: relative;
}
.myboxtape {
  background: blue;
  color: #FFFFFF;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  font-size: 20px;
  box-shadow: 0px 7px 8px -2px rgba(51, 51, 51, 0.62);
}
.myboxtape::before {
  content: '';
  display: block;
  position: absolute;
  background-color: rgba(220, 212, 176, 0.70);
  height: 125px;
}
.myboxtape::before {
  left: 45%;
  top: -60px;
  width: 28px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

<div class="mybox">
  <p class="myboxtape">
    My Title
    <br>This is some content!
  </p>
</div>

问题是我想将内容文本放在 <p> 中标签和 <h2>标签，但当我这样做时，文本会从其下方的框中跳出，我无法理解为什么？

Answer 1

可行的解决方案:将 Paragraph 更改为 div

html {
  background: red;
}
.mybox {
  margin-top: 20px;
  position: relative;
}
.myboxtape {
  background: blue;
  color: #FFFFFF;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  font-size: 20px;
  box-shadow: 0px 7px 8px -2px rgba(51, 51, 51, 0.62);
}
.myboxtape::before {
  content: '';
  display: block;
  position: absolute;
  background-color: rgba(220, 212, 176, 0.70);
  height: 125px;
}
.myboxtape::before {
  left: 45%;
  top: -60px;
  width: 28px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

<div class="mybox">
  <div class="myboxtape">
    <h1>My Title</h1>
    <br><h2>This is some content!</h2>
  </div>
</div>