css上下外边框间不重复

CSS样式中的外边框是在元素周围添加一定的空间，以便于区分元素与其周围的其他元素。在边框的上下位置上添加外边框时会遇到一个问题，就是如何结合边框与周围元素的外边框不重复。下面我们来介绍一些常用的方式。

一、使用margin

.element {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin: 10px 0;
} 

通过给元素上下添加相同大小的margin来与周围元素的外边框不重复。这种方式简单易懂，但是需要注意的是，如果元素里面还有其他元素的话，可能需要对元素的内部做一些额外的调整以确保元素内部也不会受到影响。

二、使用padding

.element {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 10px 0;
} 

通过给元素上下添加相同大小的padding来与周围元素的外边框不重复。这种方式与margin的方法相比，可以保证元素内部不会受到影响，但是会增加元素的尺寸。

三、使用伪元素

.element {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.element::before {
    content: "";
    display: block;
    height: 10px;
}
.element::after {
    content: "";
    display: block;
    height: 10px;
} 

通过给元素添加上伪元素，在元素的上下位置上添加额外的外边框。这种方式可以避免元素在高度方面的增加，但是需要添加额外的代码。

总结：

使用margin、padding、伪元素都可以解决上下外边框间重复的问题，具体选择哪种方式还是需要根据实际情况来决定。