最直接的实线边框写法是border: solid 1px，但需配合box-sizing: border-box和清除margin/padding才能真正紧贴边缘，避免因盒模型或默认间距导致视觉偏移。
border: solid 1px 是最直接的实线边框写法
HTML5 本身不提供边框设置能力，实际由 CSS 控制。要让元素显示紧贴边缘的实线边框，border 是首选属性。常见错误是只写 border: 1px solid #000 却忽略盒模型影响——这会导致元素实际尺寸变大（边框会向外撑开），视觉上“不贴边”。
实操建议：
- 始终显式声明三要素：
border-width、border-style、border-color，例如border: 1px solid #333 - 若需保持原有宽高不变，加
box-sizing: border-box，这样边框和内边距会向内压缩，而非向外扩张 - 避免仅用
border-top等单边写法却不设其他三边，否则可能因浏览器默认样式（如border: none）导致渲染不一致
为什么有时候实线边框看起来“离得远”？检查 margin 和 padding
所谓“不贴边”，90% 不是边框问题，而是外边距或内边距干扰。比如
标签自带默认 margin，即使加了 border，也会在边框外空出白边。
排查步骤：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具（F12）选中元素，看
Computed面板里的margin和padding值是否非零 - 重置常用标签默认间距：
* { margin: 0; padding: 0; }（慎用于生产环境）或针对性写p, h1, ul { margin: 0; } - 注意
line-height或字体下沉也可能造成底部“空隙”，此时可对父容器设font-size: 0后再重置子元素字号
border-image 或 outline 不能替代 border 实现紧贴实线
有人尝试用 outline 模拟边框，但它不占布局空间、无法单独控制某一边、且默认有偏移（outline-offset 默认为 0，但部分浏览器仍会轻微错位）；border-image 则需要图片资源，且复杂度高，对纯色实线完全是杀鸡用牛刀。
