盒子模型-padding和margin的对比_html 设置div的宽度加上padding magin等于父级div的宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/coderlhj666/article/details/124985354

本文详细介绍了CSS盒子模型中padding和margin的区别及应用场景。通过实例演示了如何利用padding调整子元素在父元素的位置，以及如何使用margin并解决margin穿透问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子模型-padding和margin的对比

一、如果要设置一个子元素在父元素的左上距离，如何设置

第一种方式，给父元素添加padding

设置前
设置后
通过上面可以发现给父元素设置padding，会使父元素变大，宽度就是padding+内容宽度

解决方式设置box-sizing，后就盒子宽度就等于padding+内容宽度+border宽度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .box {
    width: 300px;
    height: 300px;
    background-color: red;

    padding-left: 100px;
    box-sizing: border-box;
  }

  .content {
    width: 100px;
    height: 100px;
    background-color: green;

  }
</style>

<body>

  <div class="box">
    <div class="content"></div>
  </div>

</body>

</html>

方式二：给子元素设置margin

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .box {
    width: 300px;
    height: 300px;
    background-color: red;

    /* padding-left: 100px;
    box-sizing: border-box; */
  }

  .content {
    width: 100px;
    height: 100px;
    background-color: green;

    margin-left: 100px;
  }
</style>

<body>

  <div class="box">
    <div class="content"></div>
  </div>

</body>

</html>

如果设置在子元素设置margin-top的，会出现margin传递的情况
- 解决方式：可以给父元素设置overflow: auto;触发BFC或者给父元素设置border

上下margin传递
- margin-top传递
  - 如果这个块级元素的顶部线与父元素的顶部线重合的话，那么这个块级元素的margin-top会传递给父元素
- margin-bottom传递
  - 如果这个块级元素的低部线与父元素的低部线重合的话，那么这个块级元素的margin-bottom会传递给父元素
- 解决方式：
  - 1、给父元素设置overflow：auto
  - 2、给父元素设置padding-top、padding-bottom
  - 3、给父元素设置border
- 建议
  - margin一般用来设置兄弟元素之间的距离
  - padding一般用来设置父子元素之间的距离