Удаление дополнительной прокладки вокруг текста

У меня есть div. И я пытаюсь проложить вокруг текста 5px — не более, не менее – но там добавляется лишний интервал, так как мой браузер смеется мне в лицо по моим бесполезным попыткам заставить это делать то, что я хочу, чтобы он делал.

Здесь CSS, который я использую:

div{
    font-family:'Arial', sans-serif;
    padding:5px;
    font-size:14px;
}

И вот мой HTML:

<div>
    Sort By:
    <select>
        <option>Customer</option>
    </select>
    Search Customer:
    <input type="text">
</div>

(Нет стиля для полей input и select, кстати.)

И вот результат, который я получаю в окне моего браузера

(выделено консолью разработчика Chrome, чтобы дать вам представление о дополнительном расстоянии):

выход html http://img715.imageshack.us/img715/2438/padding.png

Подождите секунду, что там происходит? У меня есть 5px отступов по всему, а затем эта странная внутренняя прокладка продолжается. Я измерил его в редакторе изображений, и это дополнительное дополнение или что бы я ни называл это добавлением дополнительных 8px отступов, сверху и снизу.

Думал, что это может быть проблема line-height — поэтому я установил это на 0. Не изменил ничего. Попробовал установить отрицательное число. Не работает; на самом деле Chrome не хотел иметь ничего общего с этим и дал мне ошибку.

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

Я ценю помощь — спасибо заранее.

Ответ 1

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

Если вы установите overflow: hidden на свой div, вы можете увидеть, что это поведение останавливается. Конечно, вы, вероятно, этого не хотите; вам может быть лучше попытаться вручную установить высоту этих элементов формы и убедиться, что они имеют margin: 0.

Ответ 2

Попробуйте также удалить любой margin из элемента <select>:

select {
    margin: 0;
}

Это также может быть связано с невидимыми текстовыми узлами. Попробуйте удалить все пробелы из своего HTML, если вам нужна точность пикселей:

<div>Sort By:<select>
    <!-- in here whitespace won't matter -->
    <option>Customer</option>
</select>Search Customer:<input type="text"></div>

Ответ 3

Попробуйте добавить:

body{
    margin:0px !important;
    }