限制正文宽度，保留阅读空间

第 7 课 8 / 17 ｜编码：L07-11

为黄梅戏分享会建立统一样式

限制正文宽度，保留阅读空间

让正文在宽屏上不过长，在窄屏上不紧贴边缘。先分清：空间是留在盒子里面，还是盒子外面？

看图理解：内容、内边距、边框与外边距

CSS盒模型从内到外依次为内容区、padding内边距、border边框和margin外边距。内边距位于内容与边框之间，外边距位于边框之外。 — 颜色用于区分示意区域，不代表元素必须显示这些颜色；图中宽度不按下方代码的数值比例绘制。

content 内容区：放置文字、图片等内容。
padding 内边距：内容与边框之间的空间。padding: 30px; 表示上、右、下、左各留 30px。
border 边框：包围内容与内边距。没有画出边框时，内边距仍然存在。
margin 外边距：边框之外的空间。margin: 0; 表示四周外边距都为 0，不会同时清除内边距。

记忆：padding 是盒子里面留空，margin 是盒子外面留距。默认情况下，背景颜色会覆盖内容区和内边距，但不覆盖外边距。

回到代码：页面留边，正文居中

<style>
body { margin: 0; padding: 20px; }
.container {
  max-width: 640px;
  margin-inline: auto;
  padding: 16px;
  background: #f0f8f5;
}
</style>
<article class="container">
  <h1>黄梅戏分享会</h1>
  <p>从唱腔、人物与舞台三个角度认识黄梅戏。欢迎分享你的观察。</p>
</article>

body { margin: 0; } 去掉浏览器通常为正文设置的默认外边距。
body 的 padding: 20px; 在正文内部四周留出 20px，避免页面内容紧贴窗口边缘；图中的 30px 只是另一组写法示例。
.container 的 padding: 16px; 让文字与这块浅绿色区域的边缘保持距离，这是另一层元素自己的内边距。
max-width: 640px; 限制正文容器的内容区最大宽度，具体尺寸计算将在盒模型课展开。
margin-inline: auto; 在通常的横向排版中分配左右剩余空间，使这个块居中；不是让每行文字居中。

两个元素同一行：自动外边距怎样分配？

margin-inline: auto; 在通常的横向排版中，相当于同时设置左右外边距为 auto。本例先用 display: flex; 让两个元素在同一行排列，再给两个元素都设置自动外边距。Flexbox 的完整规则将在后续布局课学习。

<style>
.row {
  display: flex; /* 让两个子元素在同一行排列 */
  width: 1000px;
}
.item {
  width: 300px;
  margin-inline: auto;
  background: #e4f3ef;
}
</style>
<div class="row">
  <div class="item">唱腔赏析</div>
  <div class="item">服饰介绍</div>
</div>

本例是独立的 Flex 布局示例：两个元素都没有内边距和边框，容器未设置 gap。图中线条仅用于标记边界，不计入示例尺寸。

不是把三个空隙平均分：分配的是四个自动外边距，所以中间空隙为 200px，最外侧各为 100px；不是让两个元素各自移到父容器正中央。
不是文字居中：文字居中使用 text-align: center;。
不设置上下外边距：横向排版时，这条声明只处理左右两侧；竖排时行内方向可能对应上下。
先有同行布局，再谈分配：只给两个普通 div 设置 margin-inline: auto，不会让它们自动排到同一行。自动外边距的分配还取决于布局方式以及是否有剩余空间。

拓展阅读：min() 组合宽度

.container {
  width: min(90%, 640px);
}

取包含块宽度的90%与640px中较小的值。