不允许使用按钮标记中的p标记？

Question

我有一个<button>元素,在其中,一个<p>元素.该<p>元素与css结合使用margin-top,在类中垂直对齐按钮内的文本(按钮具有特定高度).

html看起来像这样:

<button class="someClass">
    <img ... />
    <p class="anotherClass">Caption</p>
</button>

这样工作正常,文本垂直对齐,就像应该的那样.但是我在visual studio 2012里面发出警告说:

元素'p'不能嵌套在元素'button'中.

---

我的问题:为什么<p>元素内部不允许<button>元素？还有什么选择？

Answer 1

这是正确的,不允许,因为;

• button元素的内容模型是短语内容(没有交互内容后代).
• 并且p只能在预期流量内容的地方使用.

另一种方法是摆脱p元素,而是使用一个span元素display: block:

.anotherClass {
  display: block;
}

<button class="someClass">
  <img ... />
  <span class="anotherClass">Caption</span>
</button>