HTML пробел?

Question

HTML пробел?

0

Я пытаюсь создать веб-страницу с помощью HTML, и я хочу добавить пространство между компонентами между div1 и div2.

Есть ли какой-либо тег, как пространство в HTML, чтобы я мог использовать

 <space width="50px" height="10px"/>

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

<div class="hrz-group" id="div1">
    <label>Attribute:</label>
    <select>
        <option id="day" value="month">Day</option>
        <option id="week" value="week">Week</option>
        <option id="month" value="month">Month</option>
    </select>
</div>

<div class="hrz-group">             
    <label class="hrz-group" id="div2" > Type:</label>
    <select class="hrz-group">
        <option id="Bar" value="Bar">Bar</option>
        <option id="Line" value="Line">Line</option>
    </select>
</div>

upog 21 март 2014, в 21:26

Источник

14

Просто используйте поля
John Conde 21 март 2014, в 20:13
1

... или другой <div> соответствующего размера, если вы планируете стилизовать свое пространство.
Filburt 21 март 2014, в 20:15
0

... или макет стола. ха-ха, шучу, положи факелы и вилы, ребята!
Filburt 21 март 2014, в 20:22
2

Я бы не стал добавлять дополнительную разметку, если она вам не нужна (делает страницу тяжелее, медленнее загружать ее излишне) - если вы можете использовать поля и отступы (через CSS), вам следует. мои 2 цента.
blurfus 21 март 2014, в 20:23
0

Поля CSS - это ответ.
calvin 22 март 2014, в 00:12

Показать ещё 3 комментария

Теги:

html

css

3 ответа

Ещё вопросы

... или другой <div> соответствующего размера, если вы планируете стилизовать свое пространство.
... или макет стола. ха-ха, шучу, положи факелы и вилы, ребята!
Я бы не стал добавлять дополнительную разметку, если она вам не нужна (делает страницу тяжелее, медленнее загружать ее излишне) - если вы можете использовать поля и отступы (через CSS), вам следует. мои 2 цента.

calvin · Answer 1 · 2014-03-21T23-04-00.000Z

Поля CSS

.space-below {
    margin-bottom: 10px;
}

и добавьте этот класс в верхнюю .hrz-group

<div class="hrz-group space-below" id="div1">...

ИЛИ (хотя мне не нравится стилизация на ids *)

#div1 {
    margin-bottom: 10px;
}

Или, если у вас еще нет ваших стилей, поставьте margin-bottom: 10px; в атрибуте стиля первого div.

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

Tim · Answer 2 · 2014-03-21T19-10-00.000Z

Там <spacer> если поля CSS не делают то, что вы хотите.

Я никогда не использую его (я использую CSS), поэтому я не могу говорить о том, насколько хорошо он поддерживается в браузерах.

Учебник тегов Spacer

Daniel Szabo · Answer 3 · 2014-03-21T18-06-00.000Z

Есть несколько методов, которые люди использовали на протяжении многих лет для выполнения этой задачи. С верхней части моей головы:

CSS Margin/Padding - это, как правило, самый простой, наиболее семантически правильный способ введения интервала в элементы вашего дома (также очень распространенный, что означает людей, которые приходят после того, как вам понравится больше).

Названия размерных классов. Создайте серию описательных имен классов, которые могут использоваться на всей вашей кодовой базе (техника, на которую ссылаются большинство систем grid css). Полезно для установки размеров любого элемента, пустого или нет (особенно удобно для табличных данных, когда таблицы /divs не взаимодействуют)

    <style type='text/css'>
      .w50px{width:50px}
      .h10px{width:10px}
    </style>

    <div class='w50px h10px'></div>

Встраиваемые стили - вручную украшают элементы на вашей странице встроенными стилями для точной настройки. Обратите внимание, что это, как правило, неодобрительно, поскольку оно смешивает проблемы с контентом/дизайном и требует ручного вмешательства для изменения (что является болезненным в сценариях, где вам нужно изменить значения на сайте).

    '<div style='display:inline-block;width: 20px;"></div>'

Spacer Images - Используйте пиксельное изображение X-by-Y для помещения пространства между элементами. Это получает oldschool и больше не используется (CSS прошел долгий путь с 90-х годов)

   <span>My Content></span><img src="10x30.gif"/><span>More Content</span>

См. Также: Борьба с пробелами