css元素只有中间有间距

在设计和开发网页时，我们常常需要设置元素之间的间距，使得页面看起来更加美观和整洁。但是在某些情况下，我们只想让元素之间在中间有间距，而上下左右四个方向的间距却为0。

.example{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

上述代码使用了flex布局，其中justify-content属性可以让元素在容器内平均分布，而设置为space-between时，则会使得元素之间在中间留有间距。同时，为了保证元素水平居中，我们使用了align-items: center。

此外，我们还在容器上使用了padding属性来控制左右两侧的间距，而将上下间距设置为0。

.example{
    display: inline-block;
    padding: 0 20px;
    border: 1px solid #ccc;
    line-height: 50px;
    background-color: #f5f5f5;
}

如果我们不想使用flex布局，我们还可以通过设置元素的display属性为inline-block，再使用padding属性来实现只有中间有间距的效果。上述代码中，设置了border属性可以让元素之间有一定的分隔，而line-height属性可以让文本在元素中垂直居中。

综上所述，通过灵活运用布局和样式属性，我们可以实现只有中间有间距的元素效果，为网页的设计和开发提供更多的选择。