Странное пространство после встроенного блока. Не между [дубликатом]

У меня есть этот HTML-код:

<nav>
    <ul>
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li><a href="#">c</a></li>
        <li><a href="#">d</a></li>
        <li><a href="#">e</a></li>
    </ul>
</nav>

И этот css:

nav {
    display:block;    
}

nav ul {
    display:inline-block;
    width:100%;
    list-style-type: none;
    margin:0;
    padding:0;
}

nav ul li {
    float: left;
    width: 100px;
    height:100%;
    margin-right: calc((100% - 500px) / 4);
}

nav ul li:last-child { margin-right:0; }

nav a {
    display:inline-block;
    width:100%;
    height:100%;
}

JSFIDDLE ЗДЕСЬ

Как видно на jsfiddle, после ul есть пробел, но nav выше. Установка ul на 100% не помогает, и это не похоже на маржу. Что это такое? Место: http://i.imgur.com/NSKqsUV.png


css whitespace justify
person Piotr Uchman    schedule 30.12.2013    source источник
comment
Закомментируйте пробелы между встроенными элементами блока, они обрабатываются как слова в предложении, вы получаете пробел между ними.   -  person Pete    schedule 30.12.2013
comment
Да было, спасибо!   -  person Piotr Uchman    schedule 30.12.2013
comment
И комментирование не помогает :(   -  person Piotr Uchman    schedule 30.12.2013

Ответы (3)


arrow_upward
7
arrow_downward

Привет, проверьте здесь http://jsfiddle.net/j5LLR/1/, это работает. Проблема связана с использованием:

display: inline-block;

на вашу ул. Итак, я добавил

vertical-align: top;

там тоже. К сожалению, встроенный блок вызывает много странных проблем с пространством.

person Marios Fakiolas    schedule 30.12.2013

arrow_upward
1
arrow_downward

Заставьте body иметь margin: 0.

Это решит проблему!

Вот скрипка:

http://jsfiddle.net/j5LLR/

person Kai Feller    schedule 30.12.2013
comment
Привет. Я имею в виду пространство внутри nav. :) i.imgur.com/NSKqsUV.png - person Piotr Uchman; 30.12.2013

arrow_upward
1
arrow_downward

Измените vertical-align на ul, чтобы по умолчанию было baseline, выполняя расчет с line-height, а другие значения создают этот разрыв:

Базовая линия «встроенного блока» — это базовая линия его последнего блока строки в обычном потоке, если только он не имеет блоков строк в потоке или если его свойство «переполнение» имеет вычисленное значение, отличное от «видимого», в в этом случае базовая линия является нижним краем поля.

nav ul {
  vertical-align:top;
}

Демо http://jsfiddle.net/n9uu4/2/

person DaniP    schedule 30.12.2013