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

Why if in the content block to use

margin-top: 100px;

does the header block expand, that is, the header of the site? And if you use padding-top, then the cap does not touch and the distance from the top to the content block is created. What is the significant difference? I do not understand how the content parameter can affect the cap at all?

    1 answer 1

    Because you #header not set position top: 0 ; therefore, it “clings” to the content and behaves ambiguously.

     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>

    • Yes, but why does it cling to content? After all, fixed seems to mean that the element is already clinging to the screen and should not be in contact with the contents. - GuitarFan