EgoRusMarch
@EgoRusMarch

Почему возникают отступы?

Вот такая проблема:
Не могу убрать отступы между вкладками, не могу понять откуда они взялись.

7b81f9e4ac194d979ef0783e09c28586.png
Белая вкладка, это текущая страница, а темная это 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;
}
  • Вопрос задан
  • 162 просмотра
Решения вопроса 2
yanis_kondakov
@yanis_kondakov
div.tabs li a
  padding: 0 10px;
Ответ написан
@bromzh
Drugs-driven development
Отступы возникают по той же причине, что и отступы между словами.
Решить можно, например, так:
<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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы