letter-spacing属性对居中的影响

转，https://blog.csdn.net/zheng_pika/article/details/79381968

在设计一个网页的时候，有时候为了让页面的可读性更好，更加美观；就会使用到letter-spacing属性；

letter-spacing属性是增加（值为正）或减少（值为负）字符间距；

也就是说当应用在英文是，就是增加或减少每个字母之间的间距，在中文文字中应用就是每个文字之间的间距；

然后我就遇到了问题：

 

第一种：当我给某个元素增加了间距letter-spacing之后，该元素最后一个字符后面依然存在letter-spacing的值,导致整个元素变大，以至于居中的效果被破坏；例如：

原始间距：

<p style="text-align: center"><span>这是一段文字</span></p>

 

当我增加了间距后：

<p style="text-align: center"><span style="letter-spacing: 70px">这是一段文字</span></p>

很明显就影响了后面的元素

这个问题的解决方法就是增加padding（padding-left/padding-right）值，让其值大小等于letter-spacing的值；此例就是增加padding-left，就解决了问题；

<p style="text-align: center"><span style="letter-spacing: 70px;padding-left: 70px">这是一段文字</span></p>

 

第二种：当给按钮里面的文字添加letter-spacing时，就会有所不同；

当给按钮里面的文字增加间距时，同样最后一个字符后面会有留白，而且可气的是用改变padding的方法无法很好的解决这个问题（如果用改变padding值的方法解决；我们需要通过计算；因为设置的值并不是对应的letter-spacing的值，按钮里面的文字本身与按钮边缘有默认的padding值，一般是6px（Google），假如我们设置letter-spacing为10px，按钮的padding-right此时就是16px，而左侧原来的padding-left会被我们设置的值覆盖，那么就为10px，此时按钮文字就不居中了）；

<input type="submit" name="submit" style="letter-spacing: 10px;padding-left: 10px;">

 

那么为了不必要的这种计算，我们可以针对按钮文字有另一个方法，设置text-indent值，大小等于letter-spacing；

text-indent属性规定文本块中首行文本缩进；

<input type="submit" name="submit" style="letter-spacing: 10px;text-indent: 10px;">

 

以上、解决了在使用letter-spacing是遇到的问题；理解后，以后用起来会更加舒服；
————————————————
版权声明：本文为CSDN博主「皮卡洛」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zheng_pika/article/details/79381968