ФорумРазработкаКлиентская сторонаВерстка и оформление → Как избавиться от отступа?

Как избавиться от отступа?

  • randers13

    Сообщения: 1 Репутация: N Группа: Кто попало

    Spritz 8 февраля 2019 г. 20:20

    Я пока только практикуюсь), проблема такая:

    При фокусировке ссылки она меняет стиль, добавляется бордер с падингом 5 px.
    Когда бордер появляется то падинг 5 px добавляется к отступам между ссылками и двигает соседнюю ссылку.
    Как можно это исправить?
    box-sizing: border-box не помогает.

    HTML:

    </head>
    <body>
    <header id="header">
    <div class="main">
    <img class="logo" src="img/logo.png" width="112" height="19"/>
    <nav class="menu">
    <ul>
    <li><a href="#>Hello</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>

                &lt;/ul>
            &lt;/nav>
    
        &lt;/div>
    &lt;/header>
    

    </body>
    </html>

    CSS:

    • {
      padding: 0;
      margin: 0;
      }

    body {
    font-family: "Open sans", sans-serif;
    }

    header {
    background-image: url(img/fon1.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    color: #ffffff;
    }

    .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }

    .logo {
    max-width: 100%;
    height: auto;
    padding-top: 47px;
    padding-left: 98px;
    }

    nav {

    }

    .menu ul {
    display: flex;
    padding-right: 99px;
    padding-top: 48px;
    list-style-type: none;
    }

    .menu li {
    margin-left: 15px;
    }

    .menu a {
    font-family: "Open Sans", sans-serif;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;

    }

    .menu a:hover {
    color: #ff0000;
    }

    .menu a:focus {
    border: 1px solid #ffffff;
    border-radius: 30px;
    padding: 5px;
    color: #ffffff;
    }

    .menu a:active {
    color: #ffffff;
    }

Пожалуйста, авторизуйтесь, чтобы написать комментарий!