0

Here is my HTML code. I want to set some margin between border of .main div and .field div.

<div class="main">
   <div class="field">
      <label for="input1" class="block">Name</label>
      <input type="text" id="input1">
   </div>
   <div class="field">
      <label for="input2" class="block">Email</label>
      <input type="email" id="input2">
   </div>
   <div class="field">
      <label for="input3" id="block">Another input field</label>
      <input type="email" id="input3">
   </div>
</div>

And below is CSS.

.field {
    margin-top:  2%;
}
/* For each input field in new line */
input {
    display: block;
}

The above margin: 2% property is applying to all subsequent div elements with field class but not the first div element. Instead it moves down entire div with .main class.

Here is the code in tryit editor. https://www.w3schools.com/code/tryit.asp?filename=GHO4LCR8K8NT

K_peanutButter
  • 178
  • 11
  • It is working fine. See top-margin of first .field div is attached with top-margin of .main div. In your CSS, margin top apply to first .field div also. – gpl Aug 12 '20 at 08:28
  • @gpl Yes. But it is moving entire .main div element instead of moving only first .field div. BTW i found the issue. It is margin collapsing. – K_peanutButter Aug 12 '20 at 08:45

0 Answers0