0Pricing
CSS Academy · 课时

逻辑外边距、内边距与边框

使用 start、end、block 和 inline 等逻辑属性对应项，替代 top、right、bottom 和 left。

逻辑外边距、内边距与边框 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

间距的逻辑等价属性

物理间距属性有使用块/行内方向的逻辑对应属性：

  • margin-top → margin-block-start
  • margin-bottom → margin-block-end
  • margin-left → margin-inline-start
  • margin-right → margin-inline-end

逻辑简写属性

新的简写属性可以同时覆盖两个块侧或两个行内侧：

<div class="card">Card with logical spacing</div>

使用 margin-inline: auto 居中

经典的居中模式现在有了逻辑等价写法：

<div class="container">Centered container</div>

逻辑边框属性

在逻辑侧设置边框：

<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>

逻辑定位属性

定位属性也有逻辑对应属性：

  • top → inset-block-start
  • bottom → inset-block-end
  • left → inset-inline-start
  • right → inset-inline-end

inset 简写属性

inset 属性本身就是覆盖四个方向的逻辑简写属性。inset-block 和 inset-inline 提供双轴控制。

<div class="wrap"><div class="overlay"></div></div>

逻辑尺寸属性

宽度和高度有对应的逻辑属性：

<div class="box">Sized box</div>

比较：物理属性与逻辑属性

带有起始侧边框的侧边栏：

<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>

float 和 clear 的逻辑值

float 和 clear 属性现在支持逻辑值：

<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>

逻辑 text-align

text-align: start 和 text-align: end 是 left 和 right 的逻辑替代方案，会自动适配文本方向。

<div class="nav-link">Aligned to the start (left in LTR)</div>

迁移策略

对于新代码，请优先使用逻辑属性。对于现有代码，请一次重构一个组件。迁移优先级依次为：间距（margin/padding）、边框、尺寸、定位。

快速检查

在 LTR 布局中，哪个逻辑属性等价于 margin-left，并且在 RTL 中应变为 margin-right？

回顾

逻辑 margin、padding 和 border 属性使用 block 与 inline 方向，而不是物理上的顶部、右侧、底部和左侧。margin-block、padding-inline 和 inset-block 等简写属性可以同时覆盖两侧。对于新代码中的所有间距，请优先使用逻辑属性，从而自动支持 RTL 和竖排书写模式。

常见问题解答

「逻辑外边距、内边距与边框」课时是免费的吗？

是的 — 「逻辑外边距、内边距与边框」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「逻辑外边距、内边距与边框」这节课中我会学到什么？

使用 start、end、block 和 inline 等逻辑属性对应项，替代 top、right、bottom 和 left。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「逻辑外边距、内边距与边框」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 逻辑属性为何重要：国际化
  2. 块方向与行内方向
  3. 逻辑外边距、内边距与边框
  4. RTL 布局中的逻辑属性
← 返回 CSS Academy