大多数框架用来解决这个问题的最常见的方法是在项目(标签)上设置一个上边距,然后在项目父(标签)上用负边距补偿
* {
margin: 0;
padding: 0;
}
html,body {
Box-sizing: border-Box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: -5px; /* compensate top */
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 5px 5px 0 0; /* top,right */
}
更好的方法可能是为所有项目的边提供相同的保证金,但价值只有一半.
* {
margin: 0;
padding: 0;
}
html,body {
Box-sizing: border-Box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 2.5px;
}