在 HTML 表单中设置标签和输入之间的边距答案

【问题标题】：Set margin between label and input in HTML form在 HTML 表单中设置标签和输入之间的边距
【发布时间】：2014-02-11 22:43:08
【问题描述】：

我想更改简单 HTML 表单的标签和输入之间的边距。标签位于输入字段下方。当我设置一个类时，我可以更改字体大小等其他属性，但不能更改边距。

【问题讨论】：

【解决方案1】：

<label> 默认显示为inline。您必须将其更改为 inline-block 或 block 才能设置 margin。

label {
    display: inline-block;
    margin: 10px;
}

了解更多关于 CSS 盒子模型的一些资源：

一些资源来了解更多关于 CSS 中的 display 属性：

【讨论】：

【解决方案2】：

你不能设置边距顶部和底部，因为标签被称为内联元素，如果你需要设置边距顶部或底部，然后像下面的代码一样更改为块元素

label {
        margin: 10px 0px;
        display: block;
}

或

label {
            margin: 10px 0px;
            float: left;
    }

如果为任何元素添加 css "Float:left"，则 tat 将更改为块元素

【讨论】：

【解决方案3】：

将跨度和文本视为内联。为了使用边距，必须将行内元素变成块。也使它阻塞意味着如果标签太大，它可以将内容向下推。

【讨论】：