Как сделать так, чтобы не было отступа на

Question

Я сделал кнопку на контейнер li. То есть нажимаешь на текст и оно выполняет свою функцию. Проблема лишь в одном. На кнопке стоит следующее значение: style = "left: 0px;", но всё же отступ есть(скриншот ниже). Подскажите пожалуйста, где я допустил ошибку в CSS.

    <style type="text/css">
        ul {
            display: block;
            text-align: center;
            background: grey;
        } 
        a{text-decoration: none;color:white;}
        li {
          display: inline-block;
          font-size: 200%;
          background-color: grey;
          padding: 0.5rem 5rem;
          position: absolute;
          width: 160px;
          height: 50px;
        }
        li:hover{
            background-color: darkgrey;
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
        }
        body{
            background: url(bg.png) no-repeat;
            background-attachment:fixed;
            position: absolute;
        }

        <ul>
            <li style = "left: 0px;">
                <a href = "home_page.html", target="_self">Главная</a>
            </li>
            <li style = "left: 320px;">
                <a href = "about.html", target="_self">О нас</a>
            </li>
            <li style = "left: 640px;">
                <a href = "service.html", target="_self">Услуги</a>
            </li>
            <li style = "left: 960px;">
                <a href = "contakt.html", target="_self">Контакты</a>
            </li>
        </ul>

Как дополнение скажу: пока настраивал код выше, добавил не все стили, отступа не было. Стили которые добавлял в код на показ: ul, a,li. После этого добавил ВСЕ стили и появился отступ

Answer 1

Всё легко и просто, измените в li position: absolute; на position: fixed;.

Answer 2

Вам браузер всё ломает стилями по-умолчанию. У вас цвет фона в ul. Этот тег имеет обычное позиционирование. А body имеет padding и не позволяет прижаться серому фону ul к левому краю.

Тут несколько вариантов решений:

сбрасывают все стили (reset.css), то есть все padding и margin = 0
задают свой padding для body (например, 15px), а для элементов делают отрицательный margin-left и margin-right (соответственно -15px).
Можно сделать нулевой отступ - body {padding: 0;}. Но тогда текст на мобильных будет прижиматься к краю экрана. А это некрасиво и неудобно читать. Поэтому нужно задавать padding для всех блоков с текстом.

Я чаще применяю вариант 3. Не люблю противоестественные отрицательные margin в варианте 2. И не люблю по несколько раз переписывать стили как в варианте 3, чтобы не нагружать процессор слабых устройств.

БЛОГ НА HUSL

Как сделать так, чтобы не было отступа на

Ответы (2 шт):