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 properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements. http://www.w3.org/TR/CSS21/box.html#margin-properties

另见 this answer关于为什么不能在 inline 元素上设置维度。

要解决这个问题，您可以将 li 更改为 display:inline-block。 (example) - 它有效。

或者，您也可以 float li 元素，具有相同的预期效果。 (example)