设置content内上边距100px和设置top外上边距100px不是一样吗?

设置content内上边距100px和设置top外上边距100px不是一样吗?

设置content内上边距100px和设置top外上边距100px不是一样吗?为什么效果却不一样

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕小尤 2020-09-24 10:00:59

同学你好,内边距同学理解是正确的,但外边距有一点误差,在浏览器中有展示出边框(border)的距离,所以黄色展示的是边框,具体解析请查看下图:

http://img1.sycdn.imooc.com//climg/5f6bfdae0932a01705910255.jpg

祝学习愉快!

好帮手慕小尤 2020-09-23 10:50:34

同学你好,1. margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)

2. padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)
    如:在桌子上放了一个盒子,盒子里放了一个东西!把这个盒子看成div,那么这个盒子离里面的东西的距离就是padding,而这个盒子里桌子边缘的距离,就是margin。如下图所示:

http://img1.sycdn.imooc.com//climg/5f6ab7f509512d3918150766.jpg

祝学习愉快!

  • 提问者 慕粉6099588 #1
    我理解这个意思,但是content的内边距不就是蓝色div到黄色div的距离吗?,top的外边距不就是黄色div到上一级的距离吗?也就是黄色div到蓝色div的距离呀?不是一个意思吗?
    2020-09-23 23:47:41
  • 老师,我也有和这个同学一样的问题,为什么我在.top里直接设置margin-top不可以让黄色内容下移呢?

    <!doctype html>

    <html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport"

              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Document</title>

        <style>

            .content{

                width:800px;

                height:400px;

                background-color: skyblue;

            }

            .top{

                width:400px;

                height:200px;

                background-color: yellow;

                margin-left: 200px;

                margin-top: 100px; 

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="top"></div>

        </div>

    </body>

    </html>



    2021-01-21 19:05:31
  • 同学你好,1、当一个盒子如果没有上边距(padding-top)或上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠,但是左边距不会出现这样的情况,所以设置了子元素margin-top时,父元素会随着子元素一起下移。

    2、同学可以为父div设置内边距,从而避免出现此问题。如下图所示:

    http://img1.sycdn.imooc.com//climg/600a34d00911702002780114.jpg

    祝学习愉快!

    2021-01-22 10:14:15
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师