[分享]css中怎么去除子的边距

在 CSS 中，所有的 HTML 元素都会有默认的外边距（margin）和内边距（padding）。而且当子元素嵌套在父元素中时，子元素还会继承父元素的外边距。如果我们想要去除子元素继承的外边距，有以...

在 CSS 中，所有的 HTML 元素都会有默认的外边距（margin）和内边距（padding）。而且当子元素嵌套在父元素中时，子元素还会继承父元素的外边距。

如果我们想要去除子元素继承的外边距，有以下几种方式：

1. 使用负外边距（Negative Margin）
   将子元素的外边距设为负值，可以让子元素与父元素的外边界重合，从而去除子元素继承的外边距。例如：

   div {
     margin: 20px;
   }
   div p {
     margin-top: -20px;
     margin-bottom: -20px;
   }
   
   上面的例子中，父元素 div 设置了 20px 的外边距，而子元素 p 的外边距则设为了负数 20px，这样就可以去除 p 的外边距。

2. 使用 padding 替代 margin
   在父元素中设置 padding 代替 margin，可以使子元素不再继承父元素的外边距。例如：

   div {
     padding: 20px;
   }
   div p {
     margin: 0;
   }
   
   上面的例子中，父元素 div 设置了 padding 为 20px，子元素 p 的外边距则被设为了 0，从而去除了继承的外边距。

3. 使用浮动（Float）
   将子元素设置为浮动状态，也可以去除继承的外边距。例如：

   div {
     margin: 20px;
   }
   div p {
     float: left;
   }
   
   在上面的例子中，子元素 p 被设置为浮动状态，便不再受到父元素的外边距影响。

通过上述三种方式，我们可以去除 CSS 中子元素继承的外边距，使得页面显示更加美观和规整。