• Август 21, 2019, 16:37:08
• Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Не получили письмо с кодом активации?

Автор Тема: Необходимо убрать отступ!  (Прочитано 155 раз)

Оффлайн randers

  • Newbie
  • *
  • Сообщений: 1
  • ?????
    • Просмотр профиля
Необходимо убрать отступ!
« : Февраль 09, 2019, 05:34:57 »
Я пока только практикуюсь), проблема такая:

При фокусировке ссылки она меняет стиль, добавляется бордер с падингом 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>

</ul>
</nav>

</div>
</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;
}