css - margin プロパティがインライン要素に影響しないのはなぜですか?

Question

一部のナビゲーション バー リンクを div 内で移動しようとすると、応答しません。誰でもこれについて何か支援を提供できますか? margin-top は何もしていないようです。CSS 初心者。

CSS

#nav {
    height: 70px;
    vw: 100%;
    background-color: hsla(0, 0%, 83%, .7);
    margin-left: -10px;
    margin-top: -16px;
    margin-right: -10px;
    border-bottom: 1px black solid;
}

li {
    list-style-type: none;
    display: inline;
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    padding-right: 20px;
    color: hsl(0, 0%, 50%);
    margin-top: 10px;
}

li:hover {
    color: white;
}

HTML

<header>
   <div id="nav">
      <ul>
         <li>About</li>
      </ul>
   </div>
   <h1>Hi. This is my playground.</h1>
</header>
<div id="me">
   <img src="dp.jpg">
</div>

Answer 1

marginプロパティは要素に影響を与えないため、inline機能しません。

マージン プロパティは、ボックスのマージン領域の幅を指定します。'margin' 省略形プロパティは 4 つの辺すべての余白を設定しますが、他の余白プロパティはそれぞれの辺のみを設定します。これらのプロパティはすべての要素に適用されますが、垂直マージンは置換されていないインライン要素には影響しません。http://www.w3.org/TR/CSS21/box.html#margin-properties

要素に寸法を設定できない理由については、この回答も参照してください。inline

これを解決するには、 に変更liしdisplay:inline-blockます。 (例) - 動作します。

または、要素をフロートさせliて、同じ目的の効果を得ることもできます。（例）

Answer 2

#navにタイプミスがあります:

vw: 100%;