标签样式未响应 CSS

Question

基本表格和标签。

label {
  margin-top: 1em; /*or padding-top: 20em or any em changes nothing*/
  margin-left: 2em /* padding-left: 20em or any em actually applies the styles*/
}

input {
  margin: 4em; /* or padding: in any amount works.  */
}

<form>
  <label for="question">Content</label>
  <input type="text" value="anything"></input>
  <form>

我的问题是为什么填充和边距对标签不起作用。一段时间后，我终于意识到我需要将标签设为块元素，然后它就可以工作了，但这并不适合我或没有意义。我不必为将样式应用于输入而执行此操作，并且在所有教程中我都没有看到有人明确说过标签显示块，所以我想知道为什么会出现这种行为？我认为这可能是因为元素（标签）无法识别其周围的内容，因为它不是块元素，但这比它没有按预期工作的事实更有意义。任何 CSS 大师都明白为什么标签元素会出现这种行为吗？

Answer 1

如您所述，标签需要 display 属性值为 block 或最好 inline-block 才能生效。您不必使用 input 元素明确执行此操作的原因是默认情况下输入是 inline-block。另一方面，label 默认为 inline，因此您必须手动将其声明为 block 或 inline-block。

标签样式未响应 CSS

Styling of labels not responding to CSS

html

css

forms

text-styling