letter-spacingとtext-align: center（とcalc()）
letter-spacingとテキストの中央揃えを併用すると、左右の空白がずれて見えるのでpaddingで調整することがよくある。
例えばこんな見た目のボタンを作るのに、
padding: 5px; font-size: 16px; letter-spacing: 1em; text-align: center; /*〜略〜*/
とする。
（全角スペースで表現されたデザイン画を受け取ることもあるけど、HTMLに「検 索」と入れるのはなしですよね。ぱっと思いつくところだとアクセシビリティの問題とか。）
そうすると、letter-spacingは各文字の後ろに入るので、右側の余白が大きく見えてしまう。
これをpaddingで調整するのに、
padding: 5px 5px 5px 21px; /* 5 + 16 = 21 */
でも良いのだが、ここ数年はモダンブラウザであれば「calc()」が問題なく使えるので*1、
padding: 5px 5px 5px calc(5px + 1em);
としておくと、コードの意図がより分かりやすくなって余白の調整もやりやすい。
