border必须同时指定width、style、color才生效；letter-spacing控制字符额外间距，不继承；line-height和padding共同决定文字与边框距离；flex的align-items比line-height更可靠实现垂直居中。
border 属性设置边框时，必须同时指定样式
直接写 border: 1px solid #000 是有效的，但只写 border-width: 1px 或 border-color: #333 不会显示边框——因为 CSS 要求 border-style（如 solid、dashed）必须显式声明，否则边框默认为 none。
常见错误现象：元素加了 border-width 和 border-color 却没边框，就是漏了 border-style。
- 推荐写法：
border: 2px solid #e0e0e0（简洁且无遗漏） - 若需单独控制：必须三者齐备，例如：
border-width: 1px; border-style: solid; border-color: #999 - 注意
border-image会覆盖border-style，调试时可先注释掉它
letter-spacing 控制文字间距，负值会让字挤在一起
letter-spacing 影响的是字符之间的**额外间距**，不是字体本身的字宽。它的单位支持 px、em、rem，也接受 normal（等价于 0）。
使用场景包括：标题微调、中英混排对齐、按钮文字紧凑化。
立即学习“前端免费学习笔记（深入）”；
- 中文排版慎用大正值（如
letter-spacing: 4px），易导致断词错乱 - 负值（如
letter-spacing: -0.5px）可用于收紧过松的字体，但不要低于-1px，否则部分浏览器渲染模糊 - 它不继承自父级，如果子元素需要不同间距，得显式重设
h2 {
letter-spacing: 1px;
}
button {
letter-spacing: -0.2px;
}line-height 和 padding 都影响“文字与边框的距离”，但作用不同
用户常把“文字离上边框太近”归咎于边框设置，其实真正起作用的是 line-height（控制行高）和 padding（控制内边距）。这两者叠加才决定文字到边框的视觉距离。
-
line-height：影响文字基线位置，数值过小（如line-height: 1）会让文字紧贴上下边；建议用无单位值（如1.4），避免继承混乱 -
padding：直接撑开内容区，比如padding: 12px 16px让文字离左右边框 16px，离上下边框 12px - 若用
box-sizing: border-box，padding不会撑大元素总宽高；若用默认content-box，则会
flex 布局下文字垂直居中，别只靠 line-height
当容器有边框且需文字垂直居中时，仅设 line-height 等于容器高度在多行文本或响应式场景下会失效。
更可靠的方式是用 Flex：
.card {
border: 1px solid #ddd;
padding: 16px;
display: flex;
align-items: center; /* 垂直居中 */
min-height: 80px;
}-
align-items: center对单行/多行都稳定 - 如果文字本身有
margin或line-height，优先清空再测效果 - 旧版 IE 不支持 Flex，如需兼容，得回退到
line-height + text-align: center单行方案
实际排版中，border 和 letter-spacing 很少单独出问题，真正难调的是它们跟 line-height、font-size、box-sizing 的组合效果——尤其是跨字体、跨设备时，像素级偏差往往来自这些隐性叠加。
