如何实现blockquote首尾引号的内联对齐？

嘿，这个引号对齐的问题我之前也踩过坑！咱们来快速搞定它～

首先，你遇到的核心问题是伪元素的垂直对齐和排版间距没调整好，导致引号和正文不在同一基线，还跟文本脱节。咱们一步步修改CSS：

方案1：单行/短文本引用（简单对齐） #

直接调整伪元素的垂直对齐和间距，让引号和文本紧密贴合且对齐：

blockquote {
  font-style: italic;
  border: none;
  quotes: "\201C" "\201D" "\2018" "\2019";
  display: block;
  /* 重置默认的padding/margin，避免干扰 */
  padding: 0;
  margin: 0;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
  /* 关键：和文本基线对齐 */
  vertical-align: baseline;
  /* 引号和正文之间留一点空隙，不挤在一起 */
  margin-right: 0.2em;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
  vertical-align: baseline;
  margin-left: 0.2em;
}

方案2：多行/长文本引用（固定闭引号位置） #

如果你的引用是多行的，想让闭引号固定在引用块的右下角（和最后一行文本对齐），可以用相对+绝对定位：

blockquote {
  font-style: italic;
  border: none;
  quotes: "\201C" "\201D" "\2018" "\2019";
  display: block;
  position: relative;
  /* 给右侧的闭引号留出空间，避免被文本盖住 */
  padding-right: 1em;
  /* 保持正常行高，保证对齐 */
  line-height: 1.5;
}

blockquote:before {
  content: open-quote;
  font-weight: bold;
  color: red;
  vertical-align: baseline;
  margin-right: 0.2em;
}

blockquote:after {
  content: close-quote;
  font-weight: bold;
  color: red;
  position: absolute;
  right: 0;
  bottom: 0;
  /* 继承行高，和最后一行文本基线对齐 */
  line-height: inherit;
}

这两种方案都能解决你说的“引号和文本不内联对齐”的问题，你可以根据自己的引用内容长度选合适的～

内容的提问来源于stack exchange，提问作者usernameabc