html 清除flex,html – 在包装时从flex项目中删除边距

大多数框架用来解决这个问题的最常见的方法是在项目(标签)上设置一个上边距,然后在项目父(标签)上用负边距补偿

* {

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 */

}

• Tag Item 1
• Tag Item 2
• Tag Item 3
• Tag Item 4
• Tag Item 5
• Tag Item 6
• Tag Item 7
• Tag Item 8
• Tag Item 9
• Tag Item 10
• Tag Item 11
• Tag Item 12
• Tag Item 13
• Tag Item 14
• Tag Item 15
• Tag Item 16

更好的方法可能是为所有项目的边提供相同的保证金,但价值只有一半.

* {

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;

}

• Tag Item 1
• Tag Item 2
• Tag Item 3
• Tag Item 4
• Tag Item 5
• Tag Item 6
• Tag Item 7
• Tag Item 8
• Tag Item 9
• Tag Item 10
• Tag Item 11
• Tag Item 12
• Tag Item 13
• Tag Item 14
• Tag Item 15
• Tag Item 16