display:inline-block;在这里面的作用，当不加这句的时候背景图片文字整体下移50%

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
       div{
            width:558px;
            height:559px;
            background-image:url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg);
            text-align:center;
            display:inline-block;
        }
        p{margin-top:50%;} 
    </style>
</head>
<body>
    <div>
        <p>《长歌行》
        <br>
        <br>青青园中葵，朝露待日晞。
        <br>阳春布德泽，万物生光辉。
        <br>常恐秋节至，焜黄华叶衰。
        <br>百川东到海，何时复西归。
        <br>少壮不努力，老大徒伤悲。
        <br>
        </p>
    </div>
</body>
</html>

Di1860 2019-04-09

源自：CSS背景和列表 2-6 编程练习

收起

3回答

好帮手慕慕子 2019-04-10 12:10:21

同学你好，这里可以这样理解

首先为什么会出现设置margin-top导致父子元素一起下落。因为所有相邻的两个或更多盒元素的margin将会合并为一个margin发生折叠。这里相邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、padding或Border分隔。
折叠规则是（1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。（2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。（3）两个外边距一正一负时，折叠结果是两者相加的和。
使用display: inline-block; 会为这个盒子的内容创建新的BFC（块级格式上下文）。创建了新的BFC的元素与它的子元素的外边距不会折叠
BFC是一个独立的布局环境，BFC中的元素布局是不受外界的影响,并且在一个BFC中，块级盒子与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列
这里的父元素设置了display：inline-block；导致父元素创建了新的BFC。所以子元素（文字）设置的margint-top不会影响到父元素

同学这里只需要先了解一下这个概念，随着同学更深入的学习，对这里理解就会更加明白了。

如果帮助到到了你，欢迎采纳

祝学习愉快~~~

收起回答