html - 1: header 和 div 上方的空白，Normalize 和 margin:0 没有修复。2：调整列

Question

我无法解决 2 个问题，希望能得到一些帮助。

问题 2 我还在研究，但我把它扔在这里，以防有人有一个快速的解决方案。

这是我的jsfiddle：https ://jsfiddle.net/zf0ecsnp/5/

问题 1

我似乎无法弄清楚是什么在我的 div 和标题上方创建了一小行/区域的空白。

在 jsfiddle 中运行它时它不存在，但是当我在浏览器中打开我的 index.html 文件时它就在那里。

见图片：https ://imgur.com/a/tZueV3T

我已经尝试将它添加到我的 CSS 中，但这只是把一切都搞砸了：

* {
        margin: 0;
        padding: 0;
    }

Normalize.css 也没有处理它。

我也为 h2 和 div 尝试了这个

h2 {
        margin: 0;
    }

但它没有解决它。

问题 2

我希望标题（标题 1、标题 2、标题 3 超过 2 行）和列周围的框与最长的标题和/或框一样长。

我尝试使用margin-top 和bottom 100% 和-100% 以及overflow:hidden，但这删除了底部边框。

谢谢！

标签： htmlcss

Answer 1

对于您的第一个问题，我无法重现该问题。我没有得到任何空白

对于你的第二个问题，你可以使用一个叫做 Grid 的东西。

 grid-template-rows:    minmax(100px, auto); 
 grid-template-columns: minmax(auto, 50%) 1fr 3em;

链接更多更多信息https://learncssgrid.com/#grid-container