如何调整Jekyll博客文章行间距并保证响应式一致性？

要实现行间距在页面缩放时保持一致，核心是使用相对单位（如rem、em或无单位的line-height）替代绝对单位px，这样间距会随页面缩放比例同步调整。结合你提供的HTML结构，可通过以下CSS代码实现预期效果：

/* 博客容器整体间距控制 */
.blog-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 文章列表容器 */
.posts {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 用gap控制文章预览块之间的间距，比margin更灵活 */
}

/* 文章标题行高与间距 */
.post-title {
  line-height: 1.2; /* 无单位值，基于字体大小的倍数，缩放时比例不变 */
  margin-bottom: 0.6rem;
}

/* 日期文本间距与行高 */
.post-date {
  line-height: 1.4;
  margin-bottom: 1rem;
  color: #666; /* 可选：给日期加灰色增强层次感 */
}

/* 文章摘要行间距 */
.post-summary {
  line-height: 1.6; /* 正文类内容推荐1.5-1.8的行高，保证可读性 */
}

你的原始HTML代码（整理后） #

<div class="blog-container">
    <div class="posts">
        {% for post in site.posts %}
            <div class="post-preview">
                <h2 class="post-title hover-underline-animation"><a href="{{ post.url }}" class="blue">{{ post.title }}</a></h2>
                <p class="post-date">{{ post.date | date: "%B %d, %Y" }}</p>
                <div class="post-summary">
                    {{ post.summary | strip_html }}
                </div>
            </div>
        {% endfor %}
    </div>                  
</div>

关键说明 #

1. 无单位line-height：相比line-height: 24px，无单位值会基于元素自身字体大小动态计算，页面缩放时行高比例保持一致。
2. rem单位：rem基于根元素（<html>）的字体大小，默认1rem=16px，页面缩放时所有用rem定义的间距会同步缩放。
3. flex gap：用gap控制文章预览块之间的间距，比逐个加margin-bottom更简洁，且不会出现margin折叠问题。

将上述CSS添加到你的Jekyll主题样式文件（通常是assets/css/main.css或类似路径）中，即可实现和期望效果一致的行间距，且页面缩放时间距比例保持不变。

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