Angular中如何消除app-square组件之间的间隙？

嘿，这个问题我日常开发里碰到过好多次！那些恼人的微小间隙通常是由布局特性或者HTML结构导致的，下面给你几个实用的解决办法，你可以根据自己的代码情况选择尝试：

1. 用Flexbox布局（最推荐） #

Flexbox天生就不会产生行内元素那种空白间隙，只要给父容器设置display: flex，组件之间的间隙就会自动消失，还能轻松控制排列方式：

/* 假设你的app-square放在这个容器里 */
.squares-wrapper {
  display: flex;
  flex-wrap: wrap; /* 如果需要多行排列就加上这个 */
}

这种方法兼容性好，代码简洁，是现在处理这类布局问题的首选方案。

2. 消除HTML中的空白字符 #

如果你的app-square是inline-block或者行内元素，HTML里的换行、空格会被浏览器解析成空白字符，从而产生间隙。你可以把组件标签连在一起写：

<app-square></app-square><app-square></app-square>

或者用注释消除换行的影响：

<app-square></app-square><!--
--><app-square></app-square>

不过这种方法维护起来有点麻烦，适合组件数量少的场景。

3. 给父容器设置font-size: 0 #

行内元素的空白大小受父容器字体大小影响，把父容器的font-size设为0，就能消除空白间隙，记得在组件内部重新设置需要的字体大小（如果组件里有文字的话）：

.squares-wrapper {
  font-size: 0;
}
.squares-wrapper app-square {
  font-size: 16px; /* 还原你需要的字体大小 */
  display: inline-block; /* 如果组件默认不是行内块的话需要加上 */
}

这个方法简单有效，不需要改HTML结构。

4. 检查并移除组件的margin/padding #

有时候间隙可能是组件自身的样式导致的，比如app-square的CSS里设置了margin或者padding：

app-square {
  margin: 0; /* 把左右margin设为0 */
  padding: 0; /* 如果padding也造成间隙的话一并移除 */
}

先检查一下组件的默认样式，说不定问题就出在这里！

5. 用负margin hack（不推荐） #

如果上面的方法都不想用，也可以给组件设置负的margin来抵消间隙，不过这个方法比较hack，不同浏览器可能需要调整数值：

app-square {
  display: inline-block;
  margin-right: -4px; /* 数值根据实际情况调整，一般4px左右 */
}

这个方法稳定性不如前面几种，尽量优先用前面的方案。

内容的提问来源于stack exchange，提问作者taskiukas