关于两个图片相嵌,显示出包含的效果(存在外图片的边框)

这是我们这题的代码:

#bg1 { background: url(./bg_border.jpg); height: 1000px; }#bg2 { background: url(./bg_poem.jpg); height: 1000px; }

【关于两个图片相嵌,显示出包含的效果(存在外图片的边框)】


当两个DIV相嵌,我给两个div都引入了图片
会出先几种情况
①:
关于两个图片相嵌,显示出包含的效果(存在外图片的边框)
文章图片
这是什么属性都没有添加,只会显示#bg2的引入图片
②:当我给#bg2添加内边距时,会把整个盒子撑大,但是我们还是看不到#bg1的图片
③:当我给#bg2添加外边距是,左右的能够显示出#bg1的图片,上下不会显示(这点后面会给解释)
④:当我#bg1添加外边距时,盒子大小会发生改变,因为是普通盒子,盒子被撑大了
解决:⑤:当我给#bg1添加内边距时,达到了我们想要的效果,如图显示:
关于两个图片相嵌,显示出包含的效果(存在外图片的边框)
文章图片

这一点是css比较常见的问题,两个容易相互嵌套时,我们尽量去设置外面容器的内边距然后去改变内容器的位置(内容器也相当于是盒子模型里面的文本 padding就是文本到边框的距离)

    推荐阅读