html - 如何删除这些 CSS 行之间的间距？

Question

我正在尝试article使用 CSS 网格创建一个组件。article但正如您在下面看到的， ( title、publication和excerpt)内的不同元素之间存在大量垂直空间。

当我为行输入固定高度时（例如grid-template-rows: 10px 10px 10px），间距消失，但只要我想使用更灵活的东西（auto或minmax），间距又回来了。

如何使用可以消除垂直间距的灵活高度？

main {
      display: flex;
      flex-direction: column;
      width: 500px;  
      margin: 0 auto;
    }
    
    .article {
      border-top: 1px solid #FF0000;
      border-bottom: 1px solid #FF0000;
      display: grid;
      grid-template-rows: auto auto auto;
      padding: 10px 30px;
      color:    #414a4c;
    }
    
    .publication {
      display: flex;
      justify-content: space-between;
      color: #757575;

<main>
        <a href="#" class="article">
            <div class="title">
                <h2>Article title number 1</h2>
            </div>

            <div class="publication">
                <h4>The Guardian</h4>
                <h4>27 May 2021</h4>
            </div>

            <div class="exerpt">
                <p>This is an excerpt from the article this is an excerpt from the  article, etc, etc.</p>
            </div>
        </a>

        <a href="#" class="article">
            <div class="title">
                <h2>Article title number 2</h2>
            </div>

            <div class="publication">
                <h4>The Intercept</h4>
                <h4>27 May 2021</h4>
            </div>

            <div class="exerpt">
                <p>This is an excerpt from the article this is an excerpt from the  article, etc, etc.</p>
            </div>
        </a>

        <a href="#" class="article">
            <div class="title">
                <h2>Article title number 3</h2>
            </div>

            <div class="publication">
                <h4>Yes Magazine</h4>
                <h4>27 May 2021</h4>
            </div>

            <div class="exerpt">
                <p>This is an excerpt from the article this is an excerpt from the  article, etc, etc.</p>
            </div>
        </a>
    </main>

标签： htmlcsscss-grid

Answer 1

尝试在你的 CSS 顶部添加这个 -

*,*:after,*:before{
  padding:0;
  margin:0;
  box-sizing: border-box;
}

它将重置浏览器的默认填充和边距，您可以在此处了解有关 box-sizing 的更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

代码笔： https ://codepen.io/bilal-23/pen/YzQzKGx