Вот такая проблема:
Не могу убрать отступы между вкладками, не могу понять откуда они взялись.
Белая вкладка, это текущая страница, а темная это
hover, между ними виден зазор в 5px, хотя
margin и
padding я обнулил через универсальный селектор
(*). Вот код:<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="tabs">
<ul>
<li><a class="active" href="#">Вкладка-1</a></li>
<li><a href="#">Вкладка-2</a></li>
<li><a href="#">Вкладка-3</a></li>
<li><a href="#">Вкладка-4</a></li>
<li><a href="#">Вкладка-5</a></li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
div.tabs {
float: left;
height: 45px;
width: 100%;
text-align: left;
font-family: "Century Gothic";
font-variant: small-caps;
font-size: 15px;
line-height: 45px;
background-color: #267272;
}
div.tabs li {
list-style-type: none;
display: inline-block;
}
div.tabs li a {
display: block;
text-decoration: none;
padding: 0 10px;
color: white;
}
div.tabs li a:hover{
background-color: rgba(0,0,0,0.4);
}
div.tabs li a.active {
color: #267272;
font-weight: 600;
background-color: white;
}
Простой
