Без border`а или padding`а не работает margin

two_pizza · August 1, 2013

Ребят, объясните аномалию пожалуйста. Делаю простенькое упражнение по верстке-менюшка.

Вот что получилось:

А вот код:



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Оформление вертикального меню</title>
<style type="text/css">
body{
background:#7f7f7f;
}
#left{
width:200px;
background:#369;
}
#left ul{
list-style:none; 
border:1px solid white; //[color=#00ff00]магическая строчка[/color]
padding:0px;

}
#left li{
margin:10px;
}
#left li a{
background:#fff;
text-decoration:none;
color:#69d;
padding:12px;
text-transform:uppercase;
display:block;
}
#left li a:hover{
background:#ffc;
color:#000;
}
</style>
</head>
<body>
<div id="left">
<ul>
<li><a href="#">Фильмы</a></li>
<li><a href="#">Музыка</a></li>
<li><a href="#">Софт</a></li>
<li><a href="#">Игры</a></li>
</ul>
</div>
</body>
</html>

Почему если убрать выделенную магическую строчку c border`ом (с padding`ом тоже работает), то margin первого элемента в 10px перестает работать и прилипает к верху ?.

Great Rash · August 2, 2013

Прочитайте раздел спеки про margin. Это абсолютно нормальное поведение. Так называемое "схлопывание отступов" выключается если у родителя есть border или padding или overflow отличный от visible.

Sign In

Без border`а или padding`а не работает margin

Question

two_pizza

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information