时间戳

首页 > 解决方案 > 减少标题和段落之间的差距

css - 减少标题和段落之间的差距

问题描述

我编写了一个博客网站，它运行得非常好，可以做我想做的事——我会说我的 CSS 水平差不多，但对于我的生活，我无法弄清楚为什么两者之间存在巨大差距我的博客标题和摘要/发布在它下面的日期。我希望它们之间基本上没有边距或差距，但显然不会溢出。

但是，每当我将边距设置为 0 时，它都不会缩小差距。我已经尝试过使用尺寸，但总的来说，我希望尽可能保持它们的自动高度大小，以实现移动响应并减少代码。

这是一个例子：

h1 {
  font-size: 8rem;
  letter-spacing: 0.5px;
  color: #ff4766;
}

h2 {
  font-size: 3rem;
  letter-spacing: 0.5px;
  color: ##ff4766;
}

h3 {
  font-size: 2rem;
  letter-spacing: 0.5px;
  color: #ff4766;
}

h4 {
  color: #fff;
}

p {
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: #fff;
}

a {
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #fff;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica', sans-serif;
  box-sizing: border-box;
  background-color: #3b353a;
}


.homepage-blog-section {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage-blog-container {
  height: 90%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.homepage-blog-post {
  height: auto;
  width: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 40px 0;
}

.homepage-blog-title {
  height: auto;
  width: 100%;
}

.homepage-blog-details {
  height: auto;
  width: 100%;
}

.homepage-blog-details p {
  color: #f9f9f9;
  font-style: italic;
  font-weight: 200;
  font-size: 0.8rem;
}
<section class="homepage-blog-section">
      <div class="homepage-blog-container">
        <div class="homepage-blog-post">
          <div class="homepage-blog-title">
            <a href="">
            <h3>
              Show 
            </h3>
            </a>
          </div>
          <div class="homepage-blog-details">
            <p>
              Test summary
            </p>
            <p>
              Test date
            </p>
          </div>
        </div>
      </div>
    </section>

正如您在运行该代码时所看到的那样，标题与其下方的摘要/日期之间存在很大差距。我考虑过将它们放入同一个 div，但老实说，我并不想这样做——而且它并没有完全按照我的希望工作。

我希望标题和摘要之间存在类似的差距，就像摘要和日期一样。我尝试过负边距，但最终在较小的设备上失败了——就像我说的那样，希望让这段代码尽可能干净，但又不会太繁琐。

有什么明显的我失踪了吗？

标签： css

解决方案

推荐阅读