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

Попытка переместить некоторые ссылки панели навигации внутри 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>

html css nav
person Zack    schedule 12.11.2013    source источник
comment
У вас отсутствует } в #nav.   -  person putvande    schedule 12.11.2013
comment
Извините, второй } есть. Как-то пропустил в копипасте. Добавление HTML сейчас   -  person Zack    schedule 12.11.2013

Ответы (2)


arrow_upward
3
arrow_downward

Свойство margin не влияет на элементы inline, поэтому оно не работает.

Свойства поля определяют ширину поля поля блока. Сокращенное свойство 'margin' устанавливает поле для всех четырех сторон, в то время как другие свойства поля устанавливают только соответствующую сторону. Эти свойства применяются ко всем элементам, но вертикальные поля никак не влияют на незаменяемые встроенные элементы. http://www.w3.org/TR/CSS21/box.html#margin-properties

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

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

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

person Josh Crozier    schedule 12.11.2013

arrow_upward
0
arrow_downward

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

vw: 100%;

person Alexnho    schedule 12.11.2013
comment
Поправьте меня, если я ошибаюсь, но vw является приемлемым атрибутом с CSS3, шириной области просмотра? - person Zack; 12.11.2013
comment
vw это такая же единица, как px, em, насколько я знаю. (пример: ширина: 100vw ) Редактировать: dev.w3.org/ csswg/css-values/#viewport-relative-lengths - person Alexnho; 12.11.2013