Question

我正在尝试使用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>

Answer 1

如果CSS边距不能达到您想要的效果，则会有一个<spacer>标记。

我从不使用它（我使用CSS），所以我无法谈论它在浏览器中的支持程度。

Spacer tag tutorial

Answer 2

多年来，人们使用了一些技术来完成这项任务。在我的头顶：

CSS Margin/Padding - 这通常是将间距引入dom元素的最简单，最语义正确的方法（也很常见，这意味着在你更喜欢你之后进入的人）。

Dimensional Class Names - 创建一系列可在整个代码库中使用的描述性类名（大多数css网格系统所依赖的技术）。用于在任何元素上设置尺寸，空白与否（对于表/ div不合作的表格数据需要特别方便）

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

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

Inline Styles - 使用内联样式手动装饰页面中的元素，以进行微调控制。请注意，这通常是不受欢迎的，因为它混淆了内容/设计问题并需要手动干预才能进行更改（在需要更改整个站点的值的情况下这很痛苦）。

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

Spacer Images - 使用X-by-Y像素图像在元素之间放置空格。这已经变老了，并没有真正使用（自90年代以来CSS已经走了很长的路）

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

参见： Fighting the Spaces

Answer 3

CSS边距

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

并将该类添加到顶部.hrz-group

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

或（虽然我不喜欢在ID上设置样式*）

#div1 {
    margin-bottom: 10px;
}

或者，如果您还没有将样式分开，请将margin-bottom: 10px;放在第一个div的样式属性中。

* This article by Chris Coyier非常好，并且链接到其他一些包含ids与类的好东西。

HTML空间标签？

3 个答案: