即使输入正确的代码也不会显示填充

如何解决即使输入正确的代码也不会显示填充

作为一个初学者，我正在完全基于html和css创建一个网站...不过，我遇到了一个问题-无论我在这两个代码中尝试做什么，列表中的a标签都不会被填充。 ..我试图思考一个原因，但无法提出一个理由。请查看html和css代码以获取错误。谢谢。 the website image looks like this. html＆css代码如下：

 ul{
        display: block;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: black;
        }
        li{
        float: left;
        }
        li a{
        display: block;
        color: white;
        text-align: center;
        padding: 16 px;
        }

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <Meta charset="UTF-8">
        <link rel="stylesheet" href="/styles.css">
        <title>abc's official website</title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="/index.html">Home</a></li>
                <li><a href="/articles.html">Articles</a></li>
                <li><a href="/books.html">Books</a></li>
                <li><a href="/awards.html">Awards</a></li>
                <li><a href="/shortstories.html">Shortstories</a></li>
                <li><a href="/about.html">About</a></li>
            </ul>
        </nav>
        <div>
            <p>Welcome to <br><span> abc's</span> <br>official website</p>
        </div>
         
    </body>
    </html>

但是，当您查看网站图片后，（我在html和css上尝试了ctrl + s，然后在实时服务器上再次运行它，但没有效果），水平列表中没有空格或填充。另外，我从https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu查找了大部分代码但我仍然得到相同的压缩列表结果。感谢您抽出宝贵的时间阅读该文章。

解决方法

您只需要padding: 16px而不是padding: 16 px。

ul {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/styles.css">
  <title>abc's official website</title>
</head>

<body>
  <nav>
    <ul>
      <li><a href="/index.html">Home</a></li>
      <li><a href="/articles.html">Articles</a></li>
      <li><a href="/books.html">Books</a></li>
      <li><a href="/awards.html">Awards</a></li>
      <li><a href="/shortstories.html">Shortstories</a></li>
      <li><a href="/about.html">About</a></li>
    </ul>
  </nav>
  <div>
    <p>Welcome to <br><span> abc's</span> <br>official website</p>
  </div>
</body>

</html>