padding内边距，margin外边距

最新推荐文章于 2022-09-24 12:11:54 发布

lixiuyuanNo

最新推荐文章于 2022-09-24 12:11:54 发布

阅读量132

点赞数

文章标签： css

本文链接：https://blog.csdn.net/lixiuyuanNo/article/details/119640557

版权

本文详细探讨了CSS中的内边距和外边距的使用规则，特别是对于块级元素和内联元素的区别。重点讲解了外边距的特殊情况，包括内联元素的外边距行为、外边距的负值应用以及外边距重叠的问题。通过实例展示了如何利用伪元素解决外边距重合导致的父元素与子元素边距合并现象。

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

padding: 1px 1px 1px 1px;

对于内联元素：上、下内边距会失效;

对于块级元素：上下左右内边距都会生效;

外边距：

1.块级元素所有边距都生效（包括行内块元素），

内联元素左右生效，上下不生效；

2.margin：auto;块级元素在其父级元素内水平居中，上下外边距不存在，只有左右会按照父级宽度计算左右外边距，该值写给元素本身。

3.margin为负值，是在x，y轴上移动，

4.外边距出现的特殊情况：

（1）内联元素上下外边距无效，但行内块上下外边距有效，行内块的上下两个元素，相邻垂直外边距是累加的。但当使用块级元素时，垂直方向外边距，相邻兄弟元素不累加，（外边距重合）只取最大值。

（2）外边距溢出：源于块级元素在父级元素中的第一个和最后一个子元素。该两个元素会和父元素的上下边出现合并现象。因此要避免该两个元素外边距溢出。如下图：

<style>
    .baba{
      background-color: #828282;
      /* 下内边距 */
      /* padding-top: 20px; */
      /* border: 1px solid #0F0; */   /*父元素加边框解决重合问题*/
      /* overflow: hidden; */         /*父元素溢出隐藏解决重合问题*/
    }
    /*父元素前后加伪元素解决重合问题*/
    .baba::before{
      content: '';
      display: table;
    }
    .baba::after{
      content: '';
      display: table;
    }
    .baba div{
      width: 100px;
      height: 100px;
    }
    .d1{
      background-color: #f00; 
      margin: 20px 0; 
    }
    .d2{
      background-color: #00F;  
    }
    .d3{
      background-color: #0F0; 
      margin-bottom: 20px; 
    }
  </style>

<body>
  <div class="baba">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
  </div>
</body>