Лучший способ контролировать расстояние между элементами блока?

Question

Есть ли лучший способ контролировать пространство между некоторыми элементами блока. В основном у меня есть несколько из них.

<div id="head1" class="global-box"> 
    <p>My Header Name</p> 
    <select id="Select1"> 
     <option></option> 
    </select> 
</div> 

проблема заключается в том, что пространство между My Header Name и выберите HTML элемент больше, чем я хочу ... Я попытался удалить <p>, но затем его в строке и выбрать на той же строке в качестве заголовка заголовка ..

Я мог бы использовать <br/>, но это просто создает блок?

Answer 1

Первая проверка в с использованием глобальной таблицы стилей сброса (см Resetting Again by Meyer или YUI Сброс)

Это приведет к удалению всех полей заданий во всех браузерах, чтобы обеспечить согласованность.

Затем используйте это в стиле CSS:

div.global-box p.header { margin: 0 0 5px 0; } 

Где 5px находится нижний край (верхний правый нижний левый), так что вы можете сделать это, что вы хотите.

Answer 2

Пробег: < Выбрать стиль = 'margin-top: 0px; padding-top: 0px; ' >

Answer 3

В вашем CSS

.global-box p { 
    margin-bottom: 2px; 
} 

.global-box select { 
    margin-top: 2px; 
} 

Вы, вероятно, только один из них, но это трудно понять, какой.

Answer 4

Если вы хотите сделать это только для этой <p>:

#head1 > p { margin-bottom: 0px; } 

В противном случае, если вы хотите сделать это для всех class="global-box" элементов:

.global-box > p { margin-bottom: 0px; } 

Обратите внимание, что, если это не дает у вас достаточно места до выбора, вы можете увеличить сумму нижнего предела.

Answer 5

Видимое пространство между элементами, как правило, будет либо

• обивка
• маржу

Так что, если вы хотите меньше места, измените строку заголовка в

<p style="margin: 0px; padding: 0px">My Header Name</p> 

и играть с ним.