Basic form and labels.

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>

my question is why doesn't the padding and margin work for the label. After sometime I finally realized I needed to make the label an block element and then it works but that doesn't sit well with me or make sense. I didn't have to do that for styles to apply to input and in all the tutorials I saw no one ever explicitly said label display block so I am wondering why this behavior? I thought it might be because the element (label) doesn't recognize content around it since it is not a block element but that makes less sense than the fact it does not work as expected. Any CSS gurus understand why this behavior is happening with the label element?

CodePudding user response：

As you mention, the label will need to have a display property value of block or preferably inline-block for this to take effect. The reason you didn't have to do this explicitly with the input element is that input is an inline-block by default. label, on the other hand, is inline by default, so you'll have to manually declare it to be block or inline-block.