浮动标签云实现与间距优化技巧

.tag-cloud {<br>  overflow: hidden; /* 清除浮动影响 */<br>}<br><br>.tag {<br>  float: left;<br>  margin: 5px 10px 5px 0; /* 上右下左：控制标签间隔 */<br>  padding: 6px 12px;<br>  background-color: #e0e0e0;<br>  border-radius: 15px;<br>  font-size: 14px;<br>  text-decoration: none;<br>  color: #333;<br>}

说明：

• margin: 5px 10px 5px 0 设置上下间距5px，右侧10px，左侧0，避免换行时贴边
• overflow: hidden 防止父容器塌陷
• 可根据设计调整padding和font-size改变标签大小

增强视觉：随机颜色或字号（模拟“云”感）

.tag.popular { font-size: 18px; background: #ff6b6b; color: white; }<br>.tag.medium  { font-size: 14px; background: #ffd93d; }<br>.tag.low     { font-size: 12px; background: #c7efcf; }

在HTML中使用：