本文是《100天精通HTML基础入门》专栏第 13 篇,订阅专栏不迷路。
本文目录
-
同一份内容,两种脸
-
第一个变量:每一行字占多高
-
块与块之间空多少,才叫"一组"
-
字贴到卡片边上,是 padding 的事
-
挤成一团的页面不会报错
-
拿标尺量一遍你自己的页面
同一份内容,两种脸
先做个实验(运行结果在 Chrome 128 与 Edge 128 下验证过;行高、margin、padding 这三件事属于 CSS 2.1 就定下来的机制,长期适用,不依赖具体浏览器版本)。下面四个页面,标签一模一样,文字一模一样,颜色也没动,只有三行样式不一样。我把它们逐个渲染出来,你对着看就能说出"模板感"是哪来的。
样式代码不用细看,理解为给网页化妆即可,CSS 专栏里会展开。今天只碰三个开关:line-height(行高)、margin(外边距)、padding(内边距)。
第一版,新手默认长这样。 所有元素紧紧贴在一起,浏览器给什么间距就用什么间距:
Plaintext
<!-- 《100天精通HTML基础入门》Day 13 · 平头哥 · 技术改变世界,勤奋改变人生 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>名片页 v0 · 挤成一团</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; background: #f7f5ef;
color: #24292f; margin: 0; line-height: 1; }
/* 标题:字号大,行高反而要收小 */
.card { background: #fff; border: 1px solid #d8d3c8; max-width: 640px;
padding: 0; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0; color: #2563eb; }
p { margin: 0; font-size: 14px; }
li { font-size: 14px; margin: 0; }
</style>
</head>
<body>
<div class="card">
<h1>平头哥</h1>
<p>前端工程师 · 在 CSDN 写代码笔记</p>
<h2>我会什么</h2>
<ul>
<li>HTML 结构与语义标签</li>
<li>页面排版与移动端适配</li>
<li>把零基础学员带进第一份工作</li>
</ul>
<h2>找我</h2>
<p>邮箱 pingtouge@example.com</p>
<p>坐标 杭州</p>
</div>
</body>
</html>
这版的问题不在颜色,也不在字体,而在所有距离都是 0 。行与行挨着,块与块挨着,卡片内容顶到边框。浏览器默认样式被 margin: 0 全部清掉了,清干净是好事,可你没把该留的距离补回来。
第一个变量:每一行字占多高
只改一个数字:line-height: 1 换成 line-height: 1.75。别的都不动。
Plaintext
<!-- 《100天精通HTML基础入门》Day 13 · 平头哥 · 技术改变世界,勤奋改变人生 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>名片页 v1 · 只改行高</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; background: #f7f5ef;
color: #24292f; margin: 0; line-height: 1.75; }
.card { background: #fff; border: 1px solid #d8d3c8; max-width: 640px;
padding: 0; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0; color: #2563eb; }
p { margin: 0; font-size: 14px; }
li { font-size: 14px; margin: 0; }
</style>
</head>
<body>
<div class="card">
<h1>平头哥</h1>
<p>前端工程师 · 在 CSDN 写代码笔记</p>
<h2>我会什么</h2>
<ul>
<li>HTML 结构与语义标签</li>
<li>页面排版与移动端适配</li>
<li>把零基础学员带进第一份工作</li>
</ul>
<h2>找我</h2>
<p>邮箱 pingtouge@example.com</p>
<p>坐标 杭州</p>
</div>
</body>
</html>
line-height 管的是一行文字占多高的行盒 ,不是字与字之间的距离。字号 14px、行高 1.75,每行就占 24.5px,剩下的 10.5px 平分到文字上下,眼睛才有地方落脚。写 line-height: 1 相当于把走廊拆了,让所有文字挤在一条过道里。
中文正文的经验区间是 1.6 到 1.9,标题反过来要更小(1.2 左右),因为标题字号本来就大,乘出来的实际距离已经够了。这就是为什么很多页面正文还行,标题下面却空出一大片。
块与块之间空多少,才叫"一组"
行高解决了"行间",解决不了"块间"。人和人读页面时靠距离判断归属:离得近的就是一伙的。这条规则叫亲密性,是排版里最便宜的一招。
Plaintext
<!-- 《100天精通HTML基础入门》Day 13 · 平头哥 · 技术改变世界,勤奋改变人生 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>名片页 v2 · 用 margin 分组</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; background: #f7f5ef;
color: #24292f; margin: 0; line-height: 1.75; }
.card { background: #fff; border: 1px solid #d8d3c8; max-width: 640px;
margin: 28px auto; padding: 0; }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 6px; }
.lead { color: #6b7280; margin: 0 0 24px; font-size: 15px; }
h2 { font-size: 16px; margin: 24px 0 8px; color: #2563eb; }
p { margin: 0 0 8px; font-size: 14px; }
ul { margin: 0; padding-left: 20px; }
li { font-size: 14px; margin: 0 0 4px; }
</style>
</head>
<body>
<div class="card">
<h1>平头哥</h1>
<p class="lead">前端工程师 · 在 CSDN 写代码笔记</p>
<h2>我会什么</h2>
<ul>
<li>HTML 结构与语义标签</li>
<li>页面排版与移动端适配</li>
<li>把零基础学员带进第一份工作</li>
</ul>
<h2>找我</h2>
<p>邮箱 pingtouge@example.com</p>
<p>坐标 杭州</p>
</div>
</body>
</html>
数一下这页里的三档距离:同一组内部 4 到 8px,组与组之间 24px,标题到它管的内容 8px。关键是"不相等"------只要大间距明显大于小间距,读者就知道哪里断开了。新手最常见的相反做法是所有 margin 一律写 20px,整齐是整齐了,分组信息也就没了。
顺手记一个坑:.lead 那行我写了 margin: 0 0 24px,把上边距归零,不然它会继承浏览器的 p 默认外边距,和上面 h1 挤出的距离叠加,变成一块谁也不管的空白。
字贴到卡片边上,是 padding 的事
分组对了,但文字还是顶着白框的边------那圈边框把内容"关"住了。边框内的空白叫 padding,边框外的空白叫 margin,两个别混。
Plaintext
<!-- 《100天精通HTML基础入门》Day 13 · 平头哥 · 技术改变世界,勤奋改变人生 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>名片页 v3 · 加内边距与对齐</title>
<style>
/* 让 padding 不再往外撑宽,手机上才不溢出 */
* { box-sizing: border-box; }
body { font-family: "Microsoft YaHei", sans-serif; background: #f7f5ef;
color: #24292f; margin: 0; line-height: 1.75; }
.card { background: #fff; border: 1px solid #d8d3c8; border-radius: 14px;
max-width: 640px; margin: 28px auto; padding: 28px 32px;
box-shadow: 0 4px 18px rgba(31,45,61,.07); }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 6px; }
.lead { color: #6b7280; margin: 0 0 24px; font-size: 15px; }
h2 { font-size: 16px; margin: 24px 0 8px; color: #2563eb;
border-left: 4px solid #ffd166; padding-left: 8px; }
p { margin: 0 0 8px; font-size: 14px; }
ul { margin: 0; padding-left: 20px; }
li { font-size: 14px; margin: 0 0 4px; }
.foot { margin-top: 24px; padding-top: 14px; border-top: 1px dashed #d8d3c8;
font-size: 13px; color: #6b7280; }
</style>
</head>
<body>
<div class="card">
<h1>平头哥</h1>
<p class="lead">前端工程师 · 在 CSDN 写代码笔记</p>
<h2>我会什么</h2>
<ul>
<li>HTML 结构与语义标签</li>
<li>页面排版与移动端适配</li>
<li>把零基础学员带进第一份工作</li>
</ul>
<h2>找我</h2>
<p>邮箱 pingtouge@example.com</p>
<p>坐标 杭州</p>
<p class="foot">样式不用细看,理解为给网页化妆即可。</p>
</div>
</body>
</html>
四个改动都值得说一句。第一,padding: 28px 32px 上下 28、左右 32,左右给得更多是因为汉字行宽大,横向留白更影响呼吸。第二,* { box-sizing: border-box; } 是保险:默认 content-box 下 padding 会往外撑宽,卡片可能在手机上溢出多出横向滚动条。第三,h2 左边那 4px 竖条用的是 border-left + padding-left,让色条压着文字而不是飘在旁边。第四,分隔线用的是已有元素的 border ,不是插一条 <hr>------少一个标签,层级更干净。
从 v0 到 v3,HTML 一个字没改。所谓"设计感",到这里为止全是间距。
挤成一团的页面不会报错
排版翻车最阴的地方:浏览器不报错。你少写一个闭合标签它会吼你,间距没留够它只会安静地把页面排成一堵墙。
还有一个更常见的错误来源------用 和 <br> 手敲空白来"造间距":
Plaintext
<!-- 《100天精通HTML基础入门》Day 13 · 平头哥 · 技术改变世界,勤奋改变人生 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻车 · 用 和 br 手搓间距</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; background: #f7f5ef;
color: #24292f; margin: 0; line-height: 1.75; }
.card { background: #fff; border: 1px solid #d8d3c8; max-width: 640px;
margin: 28px auto; padding: 20px; }
</style>
</head>
<body>
<div class="card">
<h1 style="margin:0;font-size:22px;">平头哥</h1>
<br>
<b>我会什么</b><br>
· HTML 结构与语义标签<br>
· 页面排版与移动端适配<br>
<br>
<b>找我</b><br>
邮箱 pingtouge@example.com
坐标 杭州 微信 pingtouge_wechat
</div>
</body>
</html>
窄屏下这一坨会立刻现形:一串 是不可断行的整体,手机宽度不够时它不折行,直接把卡片撑出横向滚动条。间距交给样式写,内容才交给 HTML 写------这是前面十几天一直在说的那条分工线。我自己带的一个学员,名片页在电脑上看着挺好,发到手机上右边一整列联系方式要左右拖,原因就是那十几个手敲的空格。
拿标尺量一遍你自己的页面
先定三个数:正文、组内、组间
填样式之前先把这张表抄进笔记,它比任何设计规范都管用:
| 用途 | 建议值 | 为什么是这个数 |
|---|---|---|
| 正文行高 | 1.6 ~ 1.9 | 中文字形方正,行距小于 1.6 容易串行 |
| 标题行高 | 1.2 左右 | 标题字号大,乘出来的实际距离已经够 |
| 组内间距 | 4 ~ 8px | 表示这几行是一伙的 |
| 组间间距 | 20 ~ 32px | 必须明显大于组内,否则分组失效 |
| 卡片内边距 | 24 ~ 32px | 小于 20px 会像被裁过 |
DevTools 里选中一个元素,右侧盒模型图会直接把 margin、border、padding、内容宽四圈数字标出来;鼠标悬停在页面上时,margin 显示为橙色,padding 显示为绿色。三个动作练手感:
-
悬停看你觉得"太挤"的那一段,看绿色的 padding 有没有,数字是多少。
-
把
line-height从 1.75 一路往下调,每改一次刷新,亲眼看到"还能读"和"读不下去"的临界点在哪。 -
把某两个相邻块的 margin 改成同一个值(比如全 20px),感受分组信息消失后的样子------这一条比任何讲解都管用。
间距这件事没有标准答案,只有"够不够用"。判断标准也很朴素:截图发给一个不认识的人,让他 3 秒内说出这页有几块内容。说不出,就是距离没拉开。
留个作业
拿你 Day 10 那个名片页做三件事。第一,只把 line-height 从浏览器默认的 normal 改成 1.8,截图存档。第二,给你的每个 section 加上 margin-bottom,自己定一个"组内距离"和一个"组间距离",两个数字必须不同。第三,把页面里所有 <br> 和 删干净,改用 padding 和 margin 补回原来的观感。做完把 v0 和最终版两张截图并排放好------Day 14 综合实战要用它当起点。
参考资料