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

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

【问题讨论】:

  • 你需要发布一些代码。
  • 你能给我们提供一个 JsFiddle 吗?
  • 不要被否决票和要求代码的 cmets 弄糊涂。您的问题对于初学者来说很好,如果了解 CSS 框模型,则不需要任何代码。查看我的回答(并为您的问题投了赞成票)。

标签: html forms margin


【解决方案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】:

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

    【讨论】:

      猜你喜欢
      • 2014-06-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-07-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多