Наложенное пространство?

Question

В этом HTML-коде; Я удалил все поля, но есть стиль около 4 пикселей выше нижнего колонтитула. Я не знаю, откуда оно взялось? Вот HTML с моделированием

\t * { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t } 
 
\t body { 
 
\t width: 900px; 
 
\t background-color: yellow; 
 
\t margin: 0px auto; 
 
\t padding: 0; 
 
\t } 
 
\t header { 
 
\t width: 900px; 
 
\t margin: 0 auto; 
 
\t height: 80px; 
 
\t background-color: brown; 
 
\t } 
 
\t nav { 
 
\t width: 900px; 
 
\t height: 50px; 
 
\t background-color: black; 
 
\t margin: 0 auto; 
 
\t } 
 
\t section { 
 
\t width: 650px; 
 
\t height: 850px; 
 
\t background-color: darkgray; 
 
\t float: left; 
 
\t margin: 0 auto; 
 
\t } 
 
\t aside { 
 
\t width: 250px; 
 
\t height: 850px; 
 
\t background-color: #6B6862; 
 
\t display: inline-block; 
 
\t margin: 0px auto; 
 
\t } 
 
\t footer { 
 
\t margin: 0px; 
 
\t width: 900px; 
 
\t height: 50px; 
 
\t background-color: black; 
 
\t } 
 
\t .by { 
 
\t color: white; 
 
\t text-align: center; 
 
\t } 
 
\t

<header> 
 
</header> 
 
<nav> 
 
</nav> 
 

 
<section> 
 
</section> 
 
<aside> 
 
</aside> 
 
<footer> 
 
    <div class="by"> 
 
    Author 
 
    </div> 
 
</footer>

Кроме того, как вертикально централизовать слово "Автор" в сноске.

Answer 1

Установка вертикального выравнивания недвижимости на ALIGN элемента. Поскольку вы устанавливаете дисплей на встроенный блок, остается место для содержимого descender.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    width: 900px; 
 
    background-color: yellow; 
 
    margin: 0px auto; 
 
    padding: 0; 
 
} 
 
header { 
 
    width: 900px; 
 
    margin: 0 auto; 
 
    height: 80px; 
 
    background-color: brown; 
 
} 
 
nav { 
 
    width: 900px; 
 
    height: 50px; 
 
    background-color: black; 
 
    margin: 0 auto; 
 
} 
 
section { 
 
    width: 650px; 
 
    height: 850px; 
 
    background-color: darkgray; 
 
    float: left; 
 
    margin: 0 auto; 
 
} 
 
aside { 
 
    width: 250px; 
 
    height: 850px; 
 
    background-color: #6B6862; 
 
    display: inline-block; 
 
    margin: 0px auto; 
 
    vertical-align:top; 
 
} 
 
footer { 
 
    margin: 0px; 
 
    width: 900px; 
 
    height: 50px; 
 
    background-color: black; 
 
} 
 
.by { 
 
    color: white; 
 
    text-align: center; 
 
}

<header> 
 
</header> 
 
<nav> 
 
</nav> 
 

 
<section> 
 
</section> 
 
<aside> 
 
</aside> 
 
<footer> 
 
    <div class="by"> 
 
    Author 
 
    </div> 
 
</footer>

Answer 2

.by Текст автора, вероятно, вызывает ошибку краха поля.

Попробуйте добавить этот CSS, чтобы .by:

.by { 
    margin: 0 auto; 
} 

Answer 3

Для выравнивания текста по вертикали центра:

footer 
    { 
    width:900px; 
    height:50px; 
    background-color:black; 
    display: table; 
    position: relative; 
    } 
    .by 
    { 
    color:white; 
     text-align:center; 
    display: table-cell; 
    vertical-align:middle; 
    } 


    And for space issue this could fix : 
    aside 
    { 
    width:250px; 
    height:850px; 
    background-color:#6B6862; 
    display:block; 
    margin:0 auto; 
    clear:right; 
    }