Автоматически ставится отступ сверху html, css

429

24 ноября 2016, 10:17

Собственно, на скриншоте сам и вопрос

HTML

<body>
<div id="wrapper">
    <div id="header" >
        <img src="img/header3.jpg" class="img_responsive" >
    </div>
    <div id="content">
        <h1>Откуда этот небольшой отступ сверху?</h1>
    </div>
</div>

CSS

*{
margin: 0;
padding: 0;
}
body{
max-width: 100%;
line-height: 1.6;
font-size: 16px;
background-color: #cccccc;
}
.img_responsive{
display: block;
height: auto;
max-width: 100%;
}
#content{
width: 960px;
height: 3200px;
margin: 0 auto;
background-color: #ffffff;
}
/**************************************************/
/*HEADER*/
/**************************************************/
#header{
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
#sm{
float: left;
position: absolute;
left: 176px;
top: 16px;
}
#cross{
position: absolute;
float: right;
top: 116px;
right: 176px;
}

Answer 1

У вас в CSS, в теге body есть атрибут line-height, который устанавливает интерлиньяж (межстрочный интервал) текста со значением 1.6. Уберите этот атрибут и пробела вверху не будет.

Answer 2

Это стили, которые ставит user-agent. В Вашем случае - это margin у body в 8px. Чтобы это преодолеть есть два варианта:

Не тру: