css上外边距怎么无效果

CSS是Web开发中不可或缺的一部分。但是你有没有遇到过设置了外边距却没有效果的情况呢？接下来我们就来看看外边距为什么无效果以及如何解决。

首先，我们需要了解两种外边距——边框外（margin）和边框内（padding）。边框外的外边距是在元素周围创建一些空白区域，而边框内的外边距则是在元素内部创建一些空白区域。

当我们设置外边距时，需要注意一下几点：

1. 如果元素的宽度为100%，则外边距无效。
2. 如果元素内部有浮动元素或绝对定位元素，则外边距无效。
3. 如果元素被包裹在另一个元素内，并且父元素设置了overflow:hidden，外边距也会无效。 

现在我们来分别看看这三种情况的解决方法。

1. 宽度为100%

.box {
    width: 100%;
    margin: 10px;
} 

上面的代码设置了一个宽度为100%的盒子，并且设置了外边距为10px。然而，我们会发现外边距并没有生效。

这是因为当元素的宽度为100%时，它会自动填充所处的父元素。因此，外边距就无法产生效果。解决方法是给盒子的父元素设置一定的宽度，这样就可以让外边距生效。

2. 浮动元素/绝对定位元素

.outer {
    overflow: hidden;
}
.box {
    float: left;
    margin: 10px;
} 

这部分代码设置了一个浮动元素和一个设置了overflow:hidden的包裹元素。同样的，外边距也无法生效。

这是因为浮动元素和绝对定位元素脱离了文档流，因此外边距就无法影响到它们。解决方法是给外层的包裹元素添加一个clearfix（clear:both）的class，这样浮动元素和绝对定位元素就会被包含在内，外边距也可以生效。

3. 包裹元素的overflow为hidden

.outer {
    overflow: hidden;
}
.box {
    margin: 10px;
} 

这部分代码设置了一个被包裹在overflow:hidden的元素中的盒子。同样的，外边距也无法生效。

这是因为当包裹元素的overflow不为visible时，它就会创建一个BFC（块级格式化上下文），使得子元素的外边距无法溢出。解决方法是给内部的盒子添加一个包裹元素，并让它成为BFC，这样外边距就可以生效了。

以上就是关于CSS上的外边距为什么无效以及如何解决的问题。我们需要注意这些问题，手写代码时才能更加得心应手。