为何CSS边框无法包围段落内的嵌入视频及后续内容？

问题根源 #

<p>标签是专门用于包裹段落文本的容器，HTML规范里它不能包含<center>这类块级元素。浏览器解析时，一旦遇到<center>就会自动提前闭合<p>标签，导致你的.mechanics_border样式只作用到开头的文字部分，视频和后续内容都被排除在这个p标签之外了。

修复方法 #

把外层的<p>换成通用块级容器<div>，<div>可以合法包含任何元素，就能让边框包裹住所有内容。另外<center>标签已经被废弃，建议用CSS的text-align: center实现居中效果，更符合现代网页标准。

修改后的HTML代码：

<div class="mechanics_border">
    <a id="red_wolf">x45 Boss Split (Red Wolf Spawns)</a><br>
    This is paragraph 1.<br>
    <div style="text-align: center;">
        <video width="520" height="340" autoplay muted controls>
            <source src="videos/valtan/red-wolf-spawns.mp4" type="video/mp4">
        </video>
    </div>
    <br>
    This is paragraph 2, it's not supposed to have it's own paragraph as I want it to be within the same border.
</div>

CSS代码可以保持不变：

.mechanics_border{
    border-style: solid;
}

这样修改后，边框就会完整包裹所有文字和视频内容了。

内容的提问来源于stack exchange，提问作者xplicitator