0

Пытаюсь сделать простое меню. Слева в списке в браузере отображается пространство ширины в 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>
1
  • Одна проблема — один вопрос, сформулируйте вопрос так, чтобы он был сконцентрирован на одной проблеме. Отредактировать вопрос можно, нажав на кнопку "править". Commented 12 окт. 2022 в 15:20

1 ответ 1

0

Для решения двух ваших проблем добавьте в стили

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.