外边距与内边距的区别

最新推荐文章于 2024-07-26 19:29:32 发布

半半俗人

最新推荐文章于 2024-07-26 19:29:32 发布

阅读量1.3k

点赞数 1

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

本文链接：https://blog.csdn.net/Beyondandzy/article/details/125320521

版权

大前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了CSS中外边距（margin）和内边距（padding）对元素内容区域的影响。外边距会使元素与周围元素产生距离，导致内容区域减小；而内边距则在元素内部创建空间，增加内容区域。通过示例代码展示了不同边距设置对200px宽高盒子的影响。

摘要由CSDN通过智能技术生成

外边距：外部向内挤压，原来的内容空间减少
内边距：内部向内扩张，原来的内容空间增加

<div style="background: aquamarine;width: 200px;height: 200px;margin: 50px">
        外边距50px
    </div>
    <div style="background: aquamarine;width: 200px;height: 200px;">
        不变的
    </div>
    <div style="background: aquamarine;width: 200px;height: 200px;padding: 50px">
        内边距50px
    </div>