Css margin / border / padding никак не влияют на элементы LI
В следующем очень простом html я не смог добиться, чтобы поля / границы / отступы моего неупорядоченного списка были чем-либо, кроме значения по умолчанию. Я пробовал "5em", "50em", "100px" ... без какого-либо эффекта.
В окне «Инструменты разработчика» Chrome показан мой CSS, но вычеркнутым шрифтом. Я знаю, что это означает, что мой CSS был чем-то переопределен. Но чем? Что может быть более приоритетным, чем простые инструкции в самом файле?
И я знаю, что мне не нужно возиться с полями, границами и отступами вместе, чтобы получить то, что я хочу (что является не чем иным, как сверхшироким левым отступом), но после того, как маржа: "0 0 0 5em" не удалось, я попытался проверить, работает ли что-нибудь.
<!DOCTYPE html>
<head>
<style>
ul li {
margin: "5em 5em 5em 5em";
border: "5em 5em 5em 5em";
padding: "5em 5em 5em 5em";
}
</style>
</head>
<body>
<ul>
<li> foo </li>
<ul>
<li> a </li>
<li> b </li>
<li> c </li>
</ul>
<li> bar </li>
</ul>
</body>
</html>Также border: 5em 5em 5em 5em; не является действительным правилом CSS. Когда хром показывает правило, перечеркнутое с желтым значком предупреждения рядом с ним, это означает, что это недопустимое правило.
Возможный дубликат Где использовать цитаты?
Ответы 2
Ни одно из ваших значений, используемых в CSS, не является действительным, поэтому они вычеркнуты, потому что браузер их не понимает.
См. Ниже, я скорректировал значения. Во-первых, ни один из них не может быть процитирован; цитируются только определенные значения, например, когда в одном значении есть пробел.
Для padding и margin необходимо только одно значение, если все 4 значения одинаковы, в противном случае:
- Два значения влияют на
vertical, затем наhorizontal(соответственно) - Три значения влияют на
top,horizontal, затемbottom - Четыре значения влияют на
top,right,bottom, затемleft
Однако для Border он определяет все 4 границы с 3 значениями:
- Ширина (1em, 5 пикселей и т. д.), Определяющая ширину линии
- Тип линии (сплошная, штриховая и т. д.)
- Цвет (#FFF, rgba(255,200,0,1))
Чтобы повлиять на отдельные границы, вам нужно использовать border-top, border-right, border-bottom,border-left`.
Обновлено: Я бы посоветовал почитать некоторую документацию. Лично я предпочитаю MDN (Сеть разработчиков Mozilla):
- https://developer.mozilla.org/en-US/docs/Web/CSS/margin
- https://developer.mozilla.org/en-US/docs/Web/CSS/padding
- https://developer.mozilla.org/en-US/docs/Web/CSS/border
<!DOCTYPE html>
<head>
<style>
ul li {
margin: 1em;
border: 1em solid #000;
padding: 1em;
}
</style>
</head>
<body>
<ul>
<li> foo </li>
<ul>
<li> a </li>
<li> b </li>
<li> c </li>
</ul>
<li> bar </li>
</ul>
</body>
</html>Удалите кавычки из ваших свойств CSS:
ul li {
margin: 5em;
border: 5em solid #FF0000
padding: 5em;
}
Обратите внимание, что если вы собираетесь использовать одно и то же значение 4 раза, вы можете записать его только один раз в качестве сокращения. И обратите внимание, как установлены значения границ.
Почему значения заключены в кавычки?