0

https://jsfiddle.net/o207fo2L/21/

Почему если в блоке content использовать

margin-top: 100px;

то при этом расширяется и блок header, то есть шапка сайта? А если использовать padding-top, то шапка не задевается и создается расстояние от сверху до блока content. В чем такая существенная разница? Не пойму как параметр контента может вообще влиять на шапку?

1 ответ 1

0

Потому что у Вас #header не задано положение top: 0; , поэтому оно "цепляется" за контент и неоднозначно себя ведет.

html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family:'Open Sans', sans-serif;
}

h1 {
  margin: 0;
  padding: 40px;
  font-weight: 400;
  color: #4c5d6e;
}



#header{
position: fixed;
width: 100%;
font-size: 15px;
font-weight: 400;
height: 60px;
line-height: 60px;
border-bottom: solid 4px black;

top: 0;
}

.ul_header{
margin:0;
padding-left: 300px;
float: left;
}

.ul_header li{
display: inline; /* Отображать как строчный элемент */
padding: 0 15px;
}

.ul_header_right{
  margin:0;
  float: right;
}

.ul_header_right li{
display: inline; /* Отображать как строчный элемент */
padding: 0 15px;
}

.content{
  margin-top: 100px;
  text-align: center;
}
<div id="header">
	<ul class="ul_header">
		<li><a href="index.html">Один</a></li>
		<li><a href="index.html">Два</a></li>
		<li><a href="index.html">Три</a></li>
		<li><a href="index.html">Четыре</a></li>
	</ul>
	<ul class="ul_header_right">
		<li><a href="index.html">Пять</a></li>
		<li><a href="index.html">Шесть</a></li>
	</ul>
</div>


<div class="content">
<h1>Список товаров</h1>
<h1>Список товаров</h1>
<h1>Список товаров</h1>
<h1>Список товаров</h1>
<h1>Список товаров</h1>
<h1>Список товаров</h1>

</div>

1
  • Да, но почему оно цепляется за контент? Ведь fixed вроде бы значит что элемент уже цепляется как бы к экрану и не должен контактировать в содержимым.
    – GuitarFan
    24 авг 2016 в 15:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.