盒模型设置margin和padding的区别

最新推荐文章于 2023-03-07 22:29:00 发布

DanceDonkey

最新推荐文章于 2023-03-07 22:29:00 发布

阅读量898

点赞数

分类专栏：前端文章标签： html css3 css

本文链接：https://blog.csdn.net/qq_43750656/article/details/121702955

版权

前端专栏收录该内容

44 篇文章 2 订阅

订阅专栏

在这里插入图片描述

test元素是个div，宽高100，div后一个兄弟元素为span，如何让div和span上下间距10px？

为div设置一个margin-bottom 10px
为div设置一个padding-bottom 10px

这两中方式都可以让div和span上下间距10px。那么这两种方式有什么区别？

如果设置的值margin-bottom，那么相当于是给div这个盒模型外部设置的边距，那么此时盒模型内部的宽高是100*100，那么此时给div设置背景的话是只有100个像素的，margin不属于盒模型内部了，此时给div加click事件，margin区域也是无效的。

<style>
  

    .box2{
        width: 100px;
        height: 100px;
        background-color: grey;
        margin-bottom: 10px;
    }
</style>
<body>

    <div class="box1">
        <div class="box2" onclick="myclick()">test</div>

        <span>span</span>

    </div>

   
<script>
    function myclick(){
        alert(111)
    }
</script>
</body>

在这里插入图片描述
此时点击红色区域是无法触发点击事件的。

但是如果给div设置padding-bottom 10px,那么此时是给元素盒模型内部设置的，此时的背景和点击事件是有效的，也就是div的盒模型此时是110px

 .box2{
        width: 100px;
        height: 100px;
        background-color: grey;
        padding-bottom: 10px;
    }

所以margin和padding还是有一些差距的，具体使用哪个需要结合场景。

DanceDonkey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录