在设计和开发网页时,我们常常需要设置元素之间的间距,使得页面看起来更加美观和整洁。但是在某些情况下,我们只想让元素之间在中间有间距,而上下左右四个方向的间距却为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属性可以让文本在元素中垂直居中。