I am following the certification of front end development (html and css) . There is a practice project in which we make a form . Now I have a question , see:
my html code is:
<p>Please fill out this form with the required information</p>
<input type="submit" value="Submit" />
now if I add my css code like
/* display: block; */
margin: 0 auto;
my page looks like :
Now see that submit button is not in center i.e it is in left of the form , but as I uncomment above comment it comes in center , I believe that because of statement ‘margin:0 auto’ it should come in center , why by changing its display to block it comes in center i.e center of the form.
(This is not complete Css code actually I have also style form tag in such a way that my form is in center , )
Please explain !
Input tags by default are inline elements
Why ‘display: inline-block’ or “inline” does not center:
There is no available horizontal space in an inline setting. Before and after it are other inline elements (characters) that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.
Why ‘display: block’ centers:
When used as an element with
display: block set to it, the available horizontal space will be the full width of the parent element minus the width of the element itself. This makes sense because
display: block is reserving this horizontal space (thus making it ‘available’). Note that elements with
display: block cannot be placed next to each other. The only exception occurs when you use
float, but in that case you also get the (expected) zero-margin-behaviour, as this disables the horizontal ‘availability’.
Here’s a link: https://stackoverflow.com/questions/19076919/marginauto-doesnt-work-on-inline-block-elements
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.