【发布时间】：2020-11-28 20:47:34
【问题描述】：
我正在使用 w3schools 学习 css，现在我正在尝试从 https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive 设计一个响应式导航栏 问题是显然 .content 需要指定填充以获得我真正想要的布局。
这是我没有填充的布局：
这是与填充padding: 1px 16px;：
我的问题是，w3schools 怎么知道添加填充可以解决这个问题？
我尝试使用元素检查器查看文档中是否添加了任何填充或边距。但 chrome 并没有突出显示任何内容。所以如果没有教程，我永远不会知道如何修复它。之前，我只假设 padding 用于在内容和它的容器之间创建一个空间，但现在似乎 padding 做了其他事情。
【问题讨论】：
-
这里根本没有问题，根据定义，padding 在内容和元素的边框之间添加了一个空格，而 margin 在边框和其余元素之外添加了一个空格。知道您在需要该空间时定义填充.. 否则默认填充“通常为零”，但这实际上取决于浏览器。所以明确定义它总是一个好习惯。
-
当属性的值设置为零或无时，devtools 也不会突出显示填充和/或边距，因为没有要突出显示的内容
标签： html css google-chrome google-chrome-devtools