I am attempting to grasp the functionality of CSS display property and experimented with this basic 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>Despite my efforts, the two input boxes appear horizontally aligned rather than stacked on top of each other. In an attempt to correct this, I added some CSS styling.
.container{
text-align: center;
display: block;
}
However, I was puzzled as to why the display block property did not have the desired effect. Shouldn't it apply to the child elements as well?
Interestingly, when I applied display: block; directly to the input element, it worked as intended. This has left me wondering about the intricacies of how CSS properties are inherited by different elements.