[分享]css3去除边距

当我们使用CSS3布局时，边距是一个很重要的概念。不过有时候，我们需要去掉一些边距，让我们的页面更加紧凑。下面介绍一些CSS3去除边距的方法。 / 方法一：使用margin负值 / .box{ mar...

当我们使用CSS3布局时，边距是一个很重要的概念。不过有时候，我们需要去掉一些边距，让我们的页面更加紧凑。下面介绍一些CSS3去除边距的方法。

 /* 方法一：使用margin负值 */
  .box{
    margin: 20px;
  }
  .no-margin{
    margin: -20px;
  }

  /* 方法二：使用padding负值 */
  .padding-box{
    padding: 20px;
  }
  .no-padding{
    padding: -20px;
  }

  /* 方法三：使用box-sizing属性 */
  .box-sizing-box{
    width: 100%;
    padding: 20px;
  }
  .no-box-sizing{
    box-sizing: border-box;
  } 

方法一：使用margin负值。在有边距的元素上，给它们添加一个负的边距。这个方法非常通用，但是需要注意的是，如果有其他元素依赖于它的位置，那么这个方法可能会影响到它们的布局。

方法二：使用padding负值。在有padding的元素上，给它们添加一个负的padding。这个方法和方法一类似，但是只适用于有padding的元素。同样需要注意，如果其他元素依赖于这些元素的位置，也可能会受到影响。

方法三：使用box-sizing属性。这个属性允许我们控制元素的盒模型。默认情况下，元素的宽度和高度会包括padding和border，如果我们将box-sizing属性设置为border-box，那么元素的宽度和高度就不再包括padding和border，而是指定的大小。这种方法最好在一些响应式布局中使用。