Настройка отступов в CSS

Есть простейшая HTML страничка, с подключенным к ней файлом CSS. На страничке всего два блока, Шапка (940px) и под ней слайдер на всю ширину окна.

Проблема в том, что между этими блоками появился зазор в 20px. И я никак не могу понять, как он появился и как его убрать. Прошу помочь разобраться.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<title>Test</title>
</head>
<body>
<header class="container">
	<h1>Tittle</h1>
</header>

<div class="backg">
	<div class="container">
		<h2>Example</h2>
	</div>
</div>
	
</body>
</html>


body {
	background-color: #ccc;
	margin:0;
	color:#eee;
	
}


.container {

	width:940px;
}

header {
	
	margin:0 auto;
	background-color: red;
	height:100px;
}


h1 {
	margin:0;
}

.backg {
	margin:0;
	background-color: blue;
	
}
  • Вопрос задан
  • 2650 просмотров
Решения вопроса 2
@cactuss
Тык
На будущее, прочитай

Если не сохранилось, то просто вставь в css вот это
*{
  margin:0;
}
Ответ написан
Vakiliy
@Vakiliy
Пригласить эксперта
Ответы на вопрос 2
@goodknight
Скорее всего, проблема в стилях браузера с префиксами, у меня было такое, для Chrome & Safari & Opera что-то вроде :

-webkit-margin-after: 0.8em
-webkit-margin-before: 0.8em


В FireFox другой.

И еще, если это чистый hand-coding и где-то есть margin, возможно, возник collapsing margin

Больше ничего сказать не могу, т.к. кроме кода ничего не вижу.
Ответ написан
Комментировать
Помимо предыдущих трех вариантов есть ещё третий:
Добавить в селектор .container свойство margin-top со значением -20px.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы