Как удалить все пробелы ниже последнего элемента блока?

Начну с того, что это может быть очень глупый вопрос, но я все равно спрошу.Как удалить все пробелы ниже последнего элемента блока?

Я работаю над сайтом с заголовком. Нижняя часть заголовка заполнена навигационной панелью с четырьмя кнопками. Все хорошо и хорошо, за исключением, что панель навигации не находится непосредственно в нижней части заголовка, но один пиксель внизу.

Это может быть крошечный дефект, но я хочу улучшить. Молитесь сказать, как я могу это исправить?

HTML, выглядит следующим образом:

<header> 
    <ul id="nav"> 
    <li><a href="#" id= "home">Home</a></li><!-- 
    --><li><a href="#" id="sheets">Sheets</a></li><!-- 
    --><li><a href="#" id="export">Export</a></li><!-- 
    --><li><a href="#" id= "help">Help</a></li> 
    </ul> 
</header>

И я использую Sass, следующим образом:

$nav-height: 2em 
$header-height: 3em + $nav-height 
$nav-button-width: 20% 
$nav-padding: (100% - $nav-button-width * 4)/2 

* 
    padding: 0 
    margin: 0 

html 
    font-size: 16px 

header 
    position: relative 
    top: 0 
    height: $header-height 
    background-color: blue 

#nav 
    position: absolute 
    bottom: 0 
    height: $nav-height 
    width: 100% 
    list-style: none 
    background-color: blue 
    text-align: center 

    li 
    display: inline 

    a 
    padding: 0.33em 
    display: inline-block 
    width: $nav-button-width 
    height: inherit 
    text-align: center 
    background-color: purple 
    color: orange 

    &:hover 
     background-color: indigo

источник

2013-08-21 Eden Landau

Попробуйте установить поля и/или paddings на ul до 0. Тем не менее, мне любопытно, как вы можете видеть, что есть одно пиксельное пространство, а заголовок и ul имеют одинаковый цвет фона. –

Вместе с этим заданным полем и дополнением к 0 тегам * li *. – Krasimir

@MrLister, это потому, что 'ul' является синим, но каждый' li' фиолетовый. @ Krasimir, 'margin' и' padding' оба установлены в 0. Все, если не указано иначе, где указано '* margin: 0 padding: 0'. –

Это глупо. Я никогда не замечал. padding на a был немного слишком мал. Я удалил его и сделал его устаревшим, добавив position: relative в li и height: 100% в a.

источник

2013-08-21 12:40:31

используется идентификатор, называемый "нав" к навигации. И вы добавили к нему «абсолютное» значение позиции. И вы заявили, что это положение элементов снизу равно 0.

#nav 
    position: absolute 
    bottom: 0 
    height: $nav-height 
    width: 100% 
    list-style: none 
    background-color: blue 
    text-align: center

Вы можете изменить нижнее значение, чтобы изменить положение снизу. В этом случае используют bottom: 1px;

Надеюсь, что это сработает.

источник

2013-08-21 12:22:48 sameerdzn

'bottom: 1px' только сделает зазор * больше *, что не решит многое. 'bottom: -1px' будет работать, но я все равно хочу знать, почему это произошло. –

Проблема возникает из-за высоты на #nav. На элементах-потомках нет фона, который имеет фоновый цвет, что дает иллюзию, что он не сидит в нижней части заголовка. Удалите высоту (или переместите высоту в элементы с цветом фона), и она работает так, как вы ожидали.

источник

2013-08-21 13:42:30 cimmanon

Как удалить все пробелы ниже последнего элемента блока?

ответ

Смежные вопросы