HTML / CSS - Необъяснимые поля

0

У меня есть следующая страница с некоторым HTML/CSS: http://jsfiddle.net/Hf6dB/1/

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

Также в реальной версии страницы, которую вы не видите на скрипке, потому что нет значков, у меня есть аналогичная проблема в каждом из пунктов меню:

            <li>
                <div class="draggable">
                    <input id="tb-btn-search" title="Search" type="button">
                    <p>Search</p>
                </div>
            </li>

Когда мышь находится вне кнопки, <p> имеет ширину, которая анимируется от 0 до примерно 2 с использованием переходов CSS. По какой-то причине, когда ширина <p> равна нулю, значок больше не центрирован, потому что здесь тоже есть дополнительный запас, который исходит из ниоткуда.

Будет ли это связано с использованием свойства отображения встроенного блока?

Спасибо за помощь!

Теги:
inline
margin

3 ответа

8
Лучший ответ

display: inline-block создает промежуток между элементами. Далее читайте здесь.

Редактировать:

bjb568, упомянутый в комментариях re 4px gap:

НЕТ! Зазор 4px зависит от шрифта и размера. Вы не можете использовать отрицательные поля для решения этой проблемы, так как вы не знаете, насколько велика разница. -4px - волшебное число, и этого следует избегать. Используйте font-size: 0, вместо этого

Поделиться
  • 0
    Спасибо за ответ, я предпочитаю это бесплатное решение.
  • 1
    Читайте об этом тоже - очень раздражает - очевидно, установка родительского div на font: 0 устранит эту проблему
Показать ещё 5 комментариев
1

Вы можете удалить inline-block в <ul> и добавить float: left; к ли

#toolbar ul,
#toolbar li
{
    display: inline-block;         /* delete this
}

#toolbar ul,
#toolbar .tb-separator,
#toolbar li
{
     float:left;
}

Обновлен JsFiddle

Поделиться
  • 0
    Спасибо за Ваш ответ. Я не фанат свойства float, поэтому я буду использовать другое решение.
  • 0
    Нет проблем;) просто дал в качестве второй возможности;)
0

Разрыв строки между элементами рассматривается как пробел, потому что элементы являются inline-block, поэтому они являются частью строки текста. Вы можете решить это, удалив пробелы и разрывы строк между элементами. Если вы хотите сохранить отступы в своем документе, вы можете добавить разрыв строки внутри самого элемента:

<outer
  ><inner
></outer>
Поделиться
  • 0
    Спасибо за Ваш ответ. Отрицательная маржа сделала работу :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню