Почему свойство margin не влияет на встроенные элементы?

Question

Попытка переместить некоторые ссылки Nav Bar внутри 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' устанавливает поле для всех четырех сторон, в то время как другие свойства поля устанавливают только их соответствующие стороны. Эти свойства применяются ко всем элементам, но вертикальные поля не будут влиять на незаменяемые встроенные элементы. http://www.w3.org/TR/CSS21/box.html

Также посмотрите этот ответ о том, почему размеры не могут быть установлены на inline элементы.

Чтобы решить эту проблему, вы можете изменить li в display:inline-block, (пример) - это работает.

В качестве альтернативы, вы также можете li элементы, имеющие одинаковый желаемый эффект. (пример)

Answer 2

В #nav у вас есть опечатка:

vw: 100%;