Пробелы HTML

Question

Я узнал HTML и CSS в последнее время и есть что-то я не понимаю, как удалить пустое пространство в нижней части моего сайта: http://puu.sh/kSu7r/2fd0ed9532.png

И у меня есть бар http://puu.sh/kSudx/2d6c69a679.png, что я хотел бы быть фиксированная (остается, даже если я прокрутите вниз), но так как код этого включает в себя позицию: относительная он не работает ..

Вот код:

.bar { 
 
\t padding:0px; 
 
\t background-color:#333333; 
 
\t height:60px; 
 
\t top: -10px; 
 
\t width:100%; 
 
\t text-align:center; 
 
} 
 

 
.bar ul { 
 
\t position:relative; 
 
    transform: translateY(-50%); 
 
    top: 50%; 
 
} 
 

 

 
.bar li { 
 
\t display:inline; 
 
\t color:white; 
 
\t font-style:Verdana; 
 
\t text-align:center; 
 
\t font-size:2em; 
 
\t font-family:'Raleway'; 
 
\t margin:10px; 
 
\t padding:10px; 
 
} 
 

 
.bar a { 
 
\t text-decoration:none; 
 
\t color:white; 
 
}

<div class="bar"> 
 
<ul> 
 
<li class="btn"><a href="#bottom">Element1</a></li> 
 
<li class="btn"><a href="#bottom">Element2</a></li> 
 
<li class="btn"><a href="#bottom">Element3</a></li> 
 
<li class="btn"><a href="#bottom">Element4</a></li> 
 
</ul> 
 
</div>

спасибо.

Answer 1

Итак, сначала я начал с: .bar в CSS. Пара вещей, которые я изменил.

Для .bar класс Я бы удалил padding:0;, height:40px, top:-10px;. Вы удаляете padding, потому что у div теги уже не имеют прокладки, height будет находиться под управлением ul (подробнее об этом позже). И я считаю, что вы использовали top, чтобы избавиться от пробелов, но позже мы это исправим.

Далее мы переходим к отметке ul. Удалить position:relative;, transform:translateY(-50%); и top:50%;. Затем добавьте margin:0; и padding:20px 0. Я мог сказать, что вы пытались использовать position, чтобы центрировать ul в вашем .bar div. Мы обрабатываем это с добавлением padding. Я удаляю margin, потому что тег ul имеет встроенные поля, и вы хотите удалить это или у вас будет пробел.

Последний штрих - это знак li. Я просто меняю display: inline; на display: inline-block, позволяя работать с отступом ul.

Это только для кода, который вы добавили к своему сообщению, не понимаете других проблем, с которыми вы связались, может потребоваться код для них. Надеюсь, это помогло!

EDITED

body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-family: 'Helvetica'; 
    background-color: #E6E6E6; 
} 


.bar { 
    background-color:#333333; 
    width:100%; 
    text-align:center; 
} 

.bar ul { 
    margin: 0; 
    padding: 20px 0; 
} 


.bar li { 
    display:inline-block; 
    color:white; 
    font-style:Verdana; 
    text-align:center; 
    font-size:2em; 
    font-family:'Raleway'; 
    margin:10px; 
    padding:10px; 
} 

.bar a { 
    text-decoration:none; 
    color:white; 
}