Пытаюсь сделать простое меню. Слева в списке в браузере отображается пространство ширины в 40 пикселей. Маржин обнулил, в чем причина. Пробовал через отрицательный маржин- увеличивается размер блока ul.
И еще вопрос почему при прописании высоты для класса .pager-current надо делать ее на 4 пикселя меньше (не 30 а 26), а иначе она вылезает за пределы блока.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нумерация страниц</title>
<style>
li {display:inline-block;
width:40px;
margin:0;
text-align:center;
padding-top:5px;
}
ul {
height:30px;
background:#F0F0F0;
border-bottom:4px solid #CCCCCC;
list-style-type:none;}
a {text-decoration:none;
color:#720000;}
.pager-current {
background:#CCCCCC;
width:40px;
height:26px;
border-bottom:4px solid black;
}
</style>
</head>
<body>
<div class="item-list">
<ul class="pager">
<li class="pager-current first"><span>1</span></li>
<li class="pager-item"><a href="/node?page=1" title="На страницу номер 2">2</a></li>
<li class="pager-item"><a href="/node?page=2" title="На страницу номер 3">3</a></li>
<li class="pager-item"><a href="/node?page=3" title="На страницу номер 4">4</a></li>
<li class="pager-next last"><a href="/node?page=1" title="На следующую страницу">›</a></li>
</ul>
</div>
<p>Содержание</p>
</body>
</html>