css display block in order to stuck to input on top of each other

April 18, 2024

I’m try to understand how does CSS display property work, i wrote this simple html code:

<div>
  <form className="container" action="">
    <input name="fName" placeholder="First Name" type="text" value={props.fName}/>
    <input name="sName" placeholder="Second Name" type="text" value={props.sName} />
    <button>Submit</button>
  </form>
</div>

with this HTML the 2 input boxes are horizontally aligned but I want them to stay on top of each other, so I tried to apply some CSS style.

.container{
  text-align: center;
  display: block; 
}

why is the display block not working as expected? should not be applied to the child as well?

if I apply display: block; to the input then it works, but I would like to understand why.

>Solution :

Setting display: block; on the container doesn’t automatically make its children stack vertically because <input> elements are naturally inline-block, meaning they sit side by side by default. To stack them vertically, you need to apply display: block; directly to the <input> elements.

.container input {
  display: block; 
}

<div>
  <form class="container" action="">
    <input name="fName" placeholder="First Name" type="text" value={props.fName}/>
    <input name="sName" placeholder="Second Name" type="text" value={props.sName} />
    <button>Submit</button>
  </form>
</div>