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

У меня есть 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 пикселей.

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

Ответы

select {
    margin: 0;
}

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

body{
    margin:0px !important;
    }