Skip to content

MkDocs Admonitions 块的修改

复制本地路径 | 在线编辑

使用 extra.css 修改 Admonitions 块样式，以 abstract 块为例，它的 HTML 结构大致是：

<details class="abstract">
  <summary>answer</summary>

  <p>第一段内容</p>
  <ul>
    <li>列表内容</li>
  </ul>
</details>

最终样式

调整颜色、Border、缩进等样式。

.md-typeset details.abstract {
  overflow: hidden;
  background: #fff;
  border: .075rem solid #00b0ff;
  border-radius: 0.35rem;
  box-shadow: none;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  font-size: 0.8rem !important;
}

/* summary 区域 */
.md-typeset details.abstract > summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 -0.8rem;
  padding: 0.3rem 2.3rem;
  background: rgba(0, 174, 255, 0.153);
}

/* 前面的图标位置 */
.md-typeset details.abstract > summary::before {
  top: .5rem;
  left: .8rem;
}

/* 右面的箭头符号 */
.md-typeset details.abstract > summary::after {
  top: .5rem;
  right: .8rem;
}

/* 内容区域，第一行 */
.md-typeset details.abstract > summary + * {
  margin-top: 1.0rem;
}

/* 内容区域，最后一行 */
.md-typeset details.abstract > :last-child {
  margin-bottom: 0.7rem;
}

修改缩进的问题

目标是：内容区整体比标题缩进一点，但内容里面的 p、ul、ol 等元素仍然保持它们自己的默认缩进规则。

之前的写法类似这样：

.md-typeset details.abstract > :not(summary) {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

这表示：details.abstract 下面除了 summary 以外的每一个直接子元素，都会被强行加上左右 padding。

比如这些元素：

<p>...</p>
<ul>...</ul>
<blockquote>...</blockquote>

都会单独获得 padding-left: 0.8rem。

这样虽然看起来“内容缩进了”，但本质上是修改了每个内容元素自己的盒模型。对于列表、引用、代码块这类本身就有缩进规则的元素，就容易出现缩进异常。

现在的做法

现在改成：

.md-typeset details.abstract {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.md-typeset details.abstract > summary {
  margin: 0 -0.8rem;
}

含义是：details.abstract 整个容器本身加左右内边距，所以它里面的内容天然会整体往里缩进。

但是 summary 是标题栏，我们不希望标题栏也被缩进去，所以给它：

margin: 0 -0.8rem;

也就是左右各向外拉回 0.8rem，抵消父容器的 padding。

最终效果

视觉结构相当于：

┌──────────────────────────────┐
│ answer 标题栏，仍然撑满整块   │
│                              │
│   内容从这里开始，有整体缩进   │
│   - 列表保持自己的缩进规则     │
│   > 引用保持自己的缩进规则     │
└──────────────────────────────┘

关键点是：缩进由外层容器负责，内部元素不再被逐个强行加 padding。这样既有 answer 块的整体层级感，又不会破坏内容元素原本的排版规则。

Comments