填充解决了一个问题，我不知道为什么

Question

我正在使用 w3schools 学习 css，现在我正尝试以此 https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive 设计响应式导航栏 问题是显然 .content 需要指定填充以获得我真正想要的布局。

这是我没有填充的布局：

这是填充 padding: 1px 16px;:

我的问题是，w3schools 怎么知道添加填充可以解决这个问题？

我已经尝试使用元素检查器查看文档中是否添加了任何填充或边距。但是 chrome 没有突出显示任何内容。所以如果没有教程，我永远不会知道如何修复它。以前，我只是假设 padding 用于在内容和它的容器之间创建一个 space，但现在看来 padding 做了别的事情。

Answer 1

设置为零的填充“禁用”在 content div 开头为 h2 设置的 margin-top。通过将顶部填充设置为 0，您可以强制 div 的内容从 div 的顶部开始，而不管顶部边距如何。