如何修复博客上博文的行间距？

Question

这就是我的代码的样子。我循环浏览每篇文章，使其显示在我的网站上。

<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>

我不确定如何使间距达到我想要的效果，同时在调整页面大小时保持不变。我是一个尝试使用 Jekyll 的完全初学者。非常感谢所有帮助！

Answer 1

您可以使用

padding

和

margin

来实现您的结果。我有下面的代码，它使用纯 HTML 和 CSS，但在

Jekyll

中，您也可以将样式标签附加到您的页面并实现相同的结果。

<style>
    *{
    margin: 0;
    padding: 0;
    }

      .blog-container {
        display: grid;
      }
      
      .post-preview {
        padding: 20px;
        text-align: left;
      }
      
      .post-title {
      padding-bottom: 1px;
      margin-bottom: 1px;
      }
      
      .post-date {
        font-style: italic;
        margin-bottom: 30px;
      }
      a{
      text-decoration: none;
      }
      
    </style>

<div class="blog-container">
    {% 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>

您可以使用以下代码作为参考。

<style>
*{
margin: 0;
padding: 0;
}

  .blog-container {
    display: grid;
  }
  
  .post-preview {
    padding: 20px;
    text-align: left;
  }
  
  .post-title {
  padding-bottom: 1px;
  margin-bottom: 1px;
  }
  
  .post-date {
    font-style: italic;
    margin-bottom: 30px;
  }
  a{
  text-decoration: none;
  }
  
</style>

<div class="blog-container">
  <div class="post-preview">
    <h2 class="post-title hover-underline-animation"><a href="url1" class="blue">Title: Lorem Ipsum has been the industry's standard</a></h2>
    <p class="post-date">01.01.2023</p>
    <div class="post-summary">
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
    </div>
  </div>
  <div class="post-preview">
    <h2 class="post-title hover-underline-animation"><a href="url1" class="blue">Title: Lorem Ipsum has been the industry's standard</a></h2>
    <p class="post-date">01.01.2023</p>
    <div class="post-summary">
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
    </div>
  </div>
</div>

希望这有帮助

Answer 2

我不知道你的CSS类是如何设置的，但是你可以通过添加：

padding-top: 16px

和

padding-bottom: 16px

（根据需要调整

px

值）到你的

post-preview

类来轻松实现它。