Не понимаю поведение эдементов

shtuceron · May 19, 2012

Добрый день,

я сейчас перемалываю стили стандартной темы wordpress (работаю с меню) и никак не могу понять почему образуется зазор.

Код меню представлен ниже:


<!DOCTYPE html>
<html>
<head>
<style>
/* Navigation Menu */
#access {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0px 0px;
    padding: 0px 0px;
    border: 1px green solid;
}
#access .menu-menu-container {
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0px 0px;
    padding: 0px 0px;
    border: 1px purple solid;
}
#access ul {
    display: block;
    width: 100%;
    margin: 0px 0px;
    padding: 0px 0px;
    font-size: 14px;
    text-align: center;
    list-style-type: none;
}
#access li {
    float: left;
    position: relative;

    border: 1px blue solid;
}
#access a {
    display: block;
    text-decoration: none;
}
</style>
</head>
<body>
<div id="page" class="hfeed">
    <header>
        <div id="access">
            <div class="menu-menu-container">
                <ul>
                    <li>
                        <a>главная</a>
                    </li>
                    <li>
                        <a>регистрация</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
</div>
</body>
</html>

Зазор между синей и зеленой рамкой, откуда он возникает? :

Спасибо

chocolate_moles · May 21, 2012

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

замените inline-block на block или добавьте к элементу vertical-align:top

Sign In

Не понимаю поведение эдементов

Question

shtuceron

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

chocolate_moles

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information