简介：ePub排版与样式入门讲解，专门面向零基础或刚接触电子书制作的个人作者、出版编辑和网页设计爱好者。文档先说明这种电子书格式是建立在网页规范上的容器，并非普通文本；随后介绍文件结构，并系统讲解标签文本、属性写法、元素包含顺序、空元素与关闭标签等核心概念。其中对段落、区块、行内、标题、图片等常用标签的说明，以及对首行缩进、水平对齐、字号、颜色、字重等属性的实例演示，可直接套用在具体的版式调整中。特别提醒了元素嵌套时关闭标签必须按顺序，避免在行内元素中插入段落等常见错误，实操指导性强。资源包为单个文档，压缩后约八百六十九千字节，便于离线查阅；已有九百五十六人学习下载，在同类入门材料中属于清晰实用的一篇，配合相关编辑器边看边实践，很快就能上手制作常见美观的电子书排版。

1. epub 电子书的排版与样式：先把它看成网页再动手

第一次接触 epub 电子书的人，多少都会把它当成“高级一点的 txt”，觉得能翻页、能搜字、能在阅读器里打开就算完事。实际上一本 epub 电子书的排版和样式，全部建立在 html 与 css 规范之上：阅读器渲染的，本质上是结构文件索引下的网页内容。这就意味着一件事——你的排版上限，取决于你对标签文本和样式表的掌控程度。这篇笔记围绕一份 epub 排版与样式资源展开，适合刚入行电子书制作、想摆脱默认样式、做出有设计感版式的从业者。读完你能理解标签、属性、外部样式表怎么配合，也能直接照参数做出首字下沉、浮动图片、引用块这些常见版式。

2. 标签文本入门：从 [p] 到 style 的手写排版

做 epub 排版前，先接受一个前提：所谓排版，就是通过对“元素”声明样式来改变显示效果。即使你用的是所见即所得的工具，生成出来的一切仍然是标签文本。把这个看透了，后面所有的操作都只是往标签里填属性而已。

2.1 标签、元素、属性是怎么拼起来的

打开任意一款 epub 制作工具，新建一个章节，编辑器里最常见的一行代码长这样：

[p style="text-align:center"]这是一段居中显示的文本[/p]

不要被方括号吓到，它和你平时见过的尖括号 html 是一个东西。在这段代码里：p是开始标签，代表一个段落的开始；style="text-align:center"是属性，声明了这段文字如何显示；[/p]是关闭标签，代表段落结束；被一对标签包裹的“这是一段居中显示的文本”就是元素。工具通常会为每个段落自动补上p和/p，所以默认情况下你不需要手写标签。但一旦你想控制样式，就必须自己往开始标签里加属性。

常用标签就几个：[div]代表一块内容容器，[p]代表段落，[span]用在段落内部标记局部文字，[h3]代表标题，[a]代表链接，[img]代表图片。其中div和p是块级元素，span是行内元素。行内元素可以嵌在块级元素内部，反过来不行——你不能在一个span里塞一个p。元素的包含顺序大致是：html到body到div到p到span。如果你写出[span][p]...[/p][/span]这种结构，阅读器轻则忽略样式，重则整段重排错乱。

标签还有一种特殊形态，叫空元素。它没有内容，不需要关闭标签，直接在开始标签尾部加/即可。最常用的是[br /]表示空行、[hr /]表示横线。这里有个血泪经验要记住：所有标签必须关闭，且涉及嵌套时关闭顺序必须先进后出。开始标签是[div][p][span]，关闭就必须是[/span][/p][/div]，顺序错了，前面的工作可能全白费。

2.2 常用排版属性：缩进、对齐、字号与行距

制作工具默认把所有段落设为首行缩进 2em、行距 130%。这个默认值能应付大多数纯文本内容，但要做特定版式，就得自己覆盖。先看一份常用属性参数表：

这里重点说两个相对单位。em是字符单位，1em 相当于当前默认字号的高度，默认字号 16px 时 1em 等于 16px；如果某段声明了font-size:1.3em，那这段里的 1em 又会按新字号重新计算，所以段落内放大局部文字时用 em 比用 px 更稳妥。%是相对于默认值的百分比，line-height:130%表示行距是正常的 1.3 倍。

属性写法有个容易翻车的点：多个赋值之间必须用英文分号隔开，名称与值之间用冒号，整个声明用引号括起来。比如[p style="text-indent:0em;text-align:center"]，如果用了中文分号，阅读器会把后面的属性全部忽略。

2.3 用工具新建章节做首轮验证

理论讲再多，不如动手验证。我一般会打开制作工具，新建一个章节，贴入最简单的一组对比样例：

[p style="text-indent:0em;text-align:center"]无缩进且居中[/p] [p style="font-size:1.3em;line-height:1em"]放大到1.3倍，行距压缩到一个字符高[/p]

第一段用来验证属性的基本解析：如果居中生效，说明标签文本结构没问题。第二段同时改字号和行距，观察行距变化：当line-height:1em时，行与行的间距等于一个字符高度，文字会显得非常挤；继续调小会发现当行距接近 0 时，超出浏览器范围的文字不会换行，而是直接溢出页面。这个行为不是 bug，而是 epub 基于网页渲染的固有特性，排歌词或竖排文本时反而能用它做特殊效果。

3. 框模型与浮动：用 margin、padding 和 float 控制布局

标签文本能控制的不只是字体和缩进。当你开始做图文混排、题注图片、引用块这些复杂版式时，必须理解一个概念：每一个元素都是一个框。排版的过程，就是把这些框按照你想要的位置和间距摆好。

3.1 把每个元素看成框

width和height控制框本身的宽度与高度，最小值是 0，不设值时由内容撑开。margin是外边距，控制这个框与其他框之间的距离；padding是内边距，控制框的边界与内部内容之间的距离。两者默认都是 0。

这个区分在实际排版的差距非常明显。比如一个带边框的图片容器，padding决定图片离边框多远，margin决定整个容器离正文多远。如果你想让图片容器“内缩”而不是“外扩”，用padding，用margin会把旁边的段落也推开，布局就乱了。

3.2 margin 与 padding 的三种赋值方式

margin和padding的赋值方式完全一致，以 margin 为例有三种。第一种是统一赋值margin:1px，四边相同；第二种是四值赋值margin:1px 2px 3px 4px，顺序固定是“上、右、下、左”；第三种是独立方向赋值，margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px。三种写法等价，但适用场景不同。

[p style="margin-right:150%"]这段文字的右侧外边距是默认的150%[/p] [div style="margin:1em 2em;padding:0.5em 1em"]上下边距1em、左右边距2em，内边距收缩[/div]

第二种写法的四值顺序是最容易记错的，很多人写成“上、左、下、右”，结果渲染出来上下边距交换。我的习惯是：只调一个方向就用第三种，明确不产生歧义；四个方向都要调才用第二种，按顺时针“上右下左”默念一遍再写。在 epub 场景里，margin和padding的取值一般用 em 或 px，不建议用百分比做精确控制——阅读器窗口宽度不固定，百分比容易失控。

3.3 float 的基本行为与图片绕排

元素默认的排列规则是从上往下、从左往右依次排布，第 6 行的图片永远到不了第 5 行。要打破这个流水线，让元素浮动起来，用的是float属性。它只有两个实用取值：left向左浮动，right向右浮动。

[div style="float:right;margin:0.4em;max-width:50%"] [img src="images/1.png"/] [/div] [br/][br/] 这是环绕图片的正文内容。浮动后的图片脱离正常文档流，右侧的文字会往上提，填补图片留下的空位。

这段代码里三个要点。float:right让图片容器浮到右侧；margin:0.4em让图片与正文之间留空隙，避免文字贴着图片边缘；max-width:50%限制图片最大宽度不超过页面一半，防止大图直接把正文挤到没有位置。最后一行是这段代码的核心逻辑：浮动元素不占文档流空间，所以后面的文字会上提补位，形成文字绕图效果。如果只写了float没写margin，图片会和文字挤在一起，看起来像贴错了位置。

3.4 clear：浮动图片挤成一团的后悔药

浮动用多了，另一个问题马上会出现：连续两张float:right的图片会并排挤在一起。因为浮动元素不再占据文档流位置，浏览器会尽量让它们处在同一水平线上。这是浮动布局最典型的翻车现场。

解决办法是引入clear清理属性，规定元素两侧是否允许出现浮动元素。取值有三个：left左侧不能出现浮动元素，right右侧不能出现，both两侧都不允许。

[div class="img-float-right"][img src="images/1.png"/][/div] [div class="img-float-right"][img src="images/2.png"/][/div]

.img-float-right { float: right; margin: 0.5em; max-width: 50%; clear: right; }

给第二个浮动容器加上clear:right之后，它就不会再和第一个挤同一行，而是老老实实换到下一行。我的经验是：只要页面里有两个以上连续浮动元素，统一在样式里带上clear，别指望每个阅读器都按照你想当然的方式处理重叠。代价只是稍微损失一点空间利用率，但换来的是跨阅读器稳定的结果，划算。

4. 外部样式表：用 main.css 和类选择器换挡

前面所有操作都是把属性直接写在开始标签里，这叫内联样式表，直观但笨重。如果全书每个段落都要用同一种强调样式，你不可能每段都复制一遍style="..."。ePub 的真正优势在于它带一个独立的 CSS 外部样式表，改一处，全书生效。

4.1 main.css 的结构与全局声明

ePub 文件本质上是一个 zip 压缩包。用解压工具打开任意一本 epub，找到main.css，用文本编辑器打开，会看到成组排列的属性声明。CSS 的结构比内联样式清晰得多：选择器确定你要改变的元素，花括号括住所有属性声明，每个属性用分号结尾。

p { text-indent: 2em; text-align: justify; line-height: 130%; margin-top: 5px; margin-bottom: 5px; }

这段声明意味着全书所有段落都会统一使用 2em 首行缩进、两端对齐、130% 行距、上下各 5px 外边距。这就是外部样式表的核心价值：全局属性一次定义，局部需要特殊处理时再用内联样式或类选择器覆盖。你想验证效果，把这段里加一行color:red，重新打包后用阅读器打开，整本书的文字都会变红——这比手工改几百个段落高效得多。

4.2 类选择器：命名规则与调用

全局声明解决了统一问题，但实际排版里更多是“部分段落特殊处理”。这时要用到类选择器。类选择器以小数点开头，名称可以自定义，字母、数字、横杠、下划线都可用，但绝不能以数字开头。

.red-big { font-size: 1.5em; text-indent: 0em; color: red; font-weight: bold; }

调用方式是通过class属性引用：

[p class="red-big"]这段文本将使用 red-big 中声明的样式来显示[/p] [p class="red-big oooo"]一次调用两个类选择器，中间用空格隔开[/p]

类选择器的优势在维护时最明显。书稿做到一半发现某类文字颜色不对，内联样式你得满书翻找；类选择器只需要打开 css 文件，找到对应类名改一处即可。我习惯把类名起成能联想样式的名字，比如bigfont-red、float-img、note-box，保证三个月后回来还能看懂。

4.3 手改 css 的工作流与常见坑

很多工具没有集成 css 编辑器，所以常见的做法是：把成品 epub 解压，修改 css 文件，再替换回去。命令行操作大致是这样：

unzip book.epub -d book/ # 打开 book/ 目录，找到 OPF 文件里的 manifest 段落，确认 css 实际路径 vim book/main.css # 修改完成后重新打包，注意保持目录结构 zip -r newbook.epub book/

这里最容易踩的坑有两个。第一，css 文件的路径不一定在根目录，必须在 OPF 文件的 manifest 声明里找href属性确认，改错文件等于白改。第二，重新打包时不要改变原有目录层级，尤其是mimetype文件，部分阅读器会校验它是不是在压缩包首位，顺序不对会导致文件打不开。这个坑毫无规律可循，不同阅读器表现还不一样，遇到“改完打不开”的情况，优先检查这两处。

4.4 为什么我建议你用类选择器替换内联样式

内联样式的优点是所见即所得，缺点同样是它：当样式复杂度上去以后，标签里塞着一长串属性，正文可读性极差，维护成本陡增。我的建议是，新手期先把内联样式练熟，理解每个属性的作用之后，立刻切换到类选择器。刚切换时会觉得多此一举，但等你需要统一调整某个版式时，就知道外部样式表有多省事了。类选择器就是 epub 排版的后悔药，提前吃下去，后面少折腾。

5. 避坑与排错：epub 样式失效的 5 个典型原因

标签语法看起来简单，但实际制作中翻车点不少。这一章总结我拆过、做过的 epub 里最常见的 5 类问题，每一条都是“现象、原因、解决”三段式，可以直接当排查手册用。

5.1 标签没关闭，后续样式全部串位

现象：某段漏写了/p，后面的段落全部变成斜体或缩进错乱。原因：阅读器把未关闭的标签当成包含关系处理，直到下一个同名关闭标签出现才结束。解决：写完每段后检查标签配对，重点检查span和div，这两个标签嵌套层级深，最容易漏。工具一般有语法高亮，颜色不匹配的位置就是要补的地方。

5.2 span 套 p 的非法嵌套

现象：想在段落内放大一块文字，写成了[span][p]...[/p][/span]，阅读器里整段重排，样式完全失效。原因：span是行内元素，p是块级元素，行内元素不能包含块级元素。解决：把顺序反过来，[p][span]...[/span][/p]，让span始终作为段落的内部标记。这条规则对div同样适用，块级元素可以套行内元素，反过来不行。

5.3 悬挂缩进列表跑到屏幕外

现象：做悬挂缩进时写了text-indent:-2em，段首标题消失了一部分。原因：负缩进把文字往左推，推到了阅读器渲染区域之外。解决：用负缩进的同时，必须配合正的外边距把整个段落向右缩排。典型参数是text-indent:-2em;margin-left:2em，缩进多少，移动多少，标题正好悬挂在段落左侧，正文也不会跑出屏幕。

5.4 阅读器不渲染 margin，空行直接塌掉

现象：引用块用margin-top:2em与正文拉开距离，换了一款阅读器后间距消失。原因：不同阅读器对margin、padding的支持程度不同，老一点的内核经常忽略块级元素的外边距，但对br标签的渲染一直稳定。解决：需要确保空行时用[br /]插入空行，不要依赖上下外边距撑开距离。这属于 epub 的“玄学”部分，同样的 css 在不同阅读器里表现可能不一致，所以关键的空行一定要用最基础的手段兜底。

5.5 多张浮动图片挤成一团

现象：连续使用float:right的图片没有依次换行，而是全部排列在同一侧。原因：浮动元素脱离文档流后会在同一水平线排列，除非有明确限制。解决：在浮动样式里加clear:right或clear:both，强制后续浮动元素换行。这个问题在图文混排的书里概率极高，我一般会在写图片容器的类选择器时就把clear一并写上，省得后面返工。

6. 六个可复制的排版实例：参数与坑位

最后一章直接给六个可以照抄的样式组合。它们都是用类选择器写的，你可以在自己的 css 文件里直接复制，再按需调整参数。

6.1 段内多尺寸字体

.s1 { font-size:1.5em; } .s2 { font-size:2em; }

文本段落里用span标记需要放大的词，适合做出强调节奏。

[p]即使[span class="s2"]知道[/span]是自己的手，却[span class="s1"]不晓得[/span]应该要抓住什么。[/p]

6.2 悬挂缩进

.s1 { text-indent:-2em; margin-left:2em; }

段首标题突出于段落左侧，正文整体右移。注意负缩进的值要和margin-left一致，否则标题对不齐。

6.3 首字下沉

.s1 { float:left; font-size:2.5em; margin:0.2em; } .indent-0 { text-indent:0em; }

段落的第一个字用span包裹，浮动到左上角。最关键的一步是段落本身要加indent-0覆盖默认的 2em 段首缩进，否则下沉字和段落首行之间会多出一截空白，怎么看都不对劲。

6.4 引用块

.s1 { text-indent:0em; font-size:1.1em; margin-left:2.5em; margin-right:2.5em; font-style:italic; }

左右外边距让引用文本从正文中脱离出来，配合斜体和稍大的字号增强辨识度。引用块前后的空行用[br /]，不要依赖上下 margin。

6.5 带边框与标题的图片

.img-s1 { float:right; border-style:solid; border-width:1px; margin:0.4em; padding:0.4em; max-width:50%; text-align:center; }

用div把图片和题注文字包在一个“框”里，再给这个框加边框和浮动。padding撑开图片与边框的距离，text-align:center让题注文字居中。题注段落记得单独声明text-indent:0em，否则默认缩进会让标题看起来偏一格。

6.6 提示框

.box { background-color:#f5f5f5; border-style:dotted; border-width:3px; } .box-title { font-weight:bold; text-align:center; text-indent:0em; }

浅灰背景加点状边框，配合加粗居中的标题，适合做小贴士、注意事项这类旁注内容。背景色可以用pink、#f5f5f5这类浅色，深色文字配上浅色底，阅读压力小。

第一次做首字下沉时，我漏了indent-0，整段开头空出两个字符，下沉字悬在半空，怎么看怎么别扭。后来把缩进清零、浮动字加上 margin 才像样。从那以后我每次做 epub，都会先在空白章节里把准备用到的属性逐项验证一遍，再套到正文，确认版式没问题之后才继续往下写。希望这套从标签到样式表的路径能帮到你，至少让你少踩几个我踩过的坑。

本文还有配套的精品资源，点击获取