CSS设置background-image背景图被文字推挤下移问题求助

给.Location元素设置background-image背景图后，内部段落文本没有正常显示在背景上层，反而出现背景图被文字推挤下移的异常效果：

涉及的代码如下：

对应CSS代码 #

.Location {
    background-image: url("https://images.pexels.com/photos/586744/pexels-photo-586744.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width:90%;
    height:500px;
    margin:0 auto;
    color: white;
}

对应HTML代码 #

<div class="Location"> 
    <article>
        <p>Downtown</p>
        <p> 384 West 4th St</p>
        <p>Suite 108</p>
        <p>Portland, Maine</p>
    </article>
</div>

• 最高概率的原因是浏览器默认外边距折叠（margin collapsing）：浏览器默认给<article>、<p>这类块级元素都预置了上下外边距，你的.Location父元素没有设置内边距、边框，也没有触发BFC，就会和内部第一个子元素的margin-top发生外边距折叠——子元素的上外边距会“溢出”到父元素外侧，视觉上就像父元素的背景被内部内容挤得往下掉。
  修复可以选任意一种方案：
  • 给.Location加一行overflow: hidden触发BFC，直接阻断外边距折叠；
  • 给.Location加任意非0的上内边距，比如padding-top: 1px，隔开父子元素的外边距避免折叠；
  • 最一劳永逸的是在CSS开头加全局重置，清掉浏览器默认的边距：

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    

• 第二种可能：你写的height: 500px被其他优先级更高的CSS规则覆盖了，导致.Location的实际高度完全由内部文本撑开，配合background-size: cover的渲染规则，就会出现背景跟着内容高度下移的错觉。直接打开浏览器开发者工具，选中.Location元素看右侧盒模型面板，确认高度值是否真的生效，要是被覆盖就提高该条规则的优先级即可。
• 第三种可能：其他CSS规则给.Location设置了冲突的背景属性，比如修改了background-origin/background-clip的默认值，如果这俩属性被改成content-box，同时元素内容区定位异常，也可能出现背景位移，改回默认的border-box/padding-box就能恢复。

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