本文基于尚硅谷Web前端基础教程发布,你也可以理解成这是一篇尚硅谷教程笔记,当然这里也有我的一些经验总结

内边距

podding

顾名思义就是内容区与边框之间的距离称为内边距,这里一共有四个方向的内边距分别是

  • podding-top
  • podding-right
  • podding-bottom
  • podding-left

同样也可以简写成 podding: xxx xxx xxx xxx; 顺序同样是上右下左而内边距的大小会影响到盒子的大小所以一个盒子的大小应该是内容区和内边距,边框三个元素一起决定的即
border + podding + margin;

外边距

margin

Screenshot_2025_0126_235805.png

外边距即一个盒模型和另一个盒子之间的距离,也是一共有四个方向只是运动方向相反且默认设置正值

  • margin-top

    • 向上的距离,物体向下移动
  • margin-right

    • 默认下的不产生效果
  • margin-bottom

    • 下边距,其下边的元素向下移动
  • margin-left

    • 左边距,元素向右移动

    外边距的简写与内边距相同

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
      <style>
    .box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    /* 以下为边框部分的样式 */
    border: 20px red solid;
    margin: 10px 20px 30px 40px;
    }
    .box2 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    /* 以下为边框部分的样式 */
    border: 20px red solid;
    margin: 10px 20px 30px 40px;
    }
    </style>

    <div class="box1"></div>
    <div class="box2"></div>

    Screenshot_2025_0206_131812.png


发表了 49 篇文章 · 总计 29.3k 字

本站由 LineXic 使用 Stellar 1.29.1 主题创建。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

纳云计算 搭建框架 托管
萌ICP备20240181号

我们会像繁星一样灿烂的活下去

你是自己永远生机勃勃的战友,而不是别人投射在你身上的幽灵