Styling using id on html form not effective-CodePudding

Any idea why the styling is not effective when I use id on the form tag but it becomes effective after replacing id with class

    <form id="contact-form">
            <label>Subject</label>
            <input class="input-field" type="text" name="subject">
            <label>Email</label>
            <input class="input-field" type="text" name="email">
            <label>Message</label>
            <input id="submit-button" type="submit" value="Send">
    </form>

 

    #contact-form{
display: block
}

CodePudding user response：

It is applying to form and it is displaying as block but it seems you want form child elements to be displayed block so use * with #contact-form

#contact-form * {
  display: block
}

<form id="contact-form">
  <label>Subject</label>
  <input class="input-field" type="text" name="subject">
  <label>Email</label>
  <input class="input-field" type="text" name="email">
  <label>Message</label>
  <input id="submit-button" type="submit" value="Send">
</form>

And form tag is a block-level element but input label is not.
You can see by applying other properties to id

#contact-form {
  display: block;
  background-color: red;
}

<form id="contact-form">
  <label>Subject</label>
  <input class="input-field" type="text" name="subject">
  <label>Email</label>
  <input class="input-field" type="text" name="email">
  <label>Message</label>
  <input id="submit-button" type="submit" value="Send">
</form>