'Div' and 'Input' tag acting differently

Question

I am making a search tool, and the search bar was originally a div, and everything was fine, but when I change it to input tags, the margin on the left disappears. Can someone please explain why this might be happening.

Here's my code (with header HTML removed for security reasons): http://jsfiddle.net/k3pv5cmh/

I have tried margin: auto, margin: 0 auto, and margin-left: auto with margin-right: auto. But none of these fix the problem.

On the JS Fiddle you can change the input tags to div tags and see the difference.

a css style that i can add to my style sheet (see js fiddle) to centralize the input box @GirdharSinghRathore — Magna Wise, Jul 29 '15 at 08:35
add css as margin-left: 100px; or according to your page you can increase and decrease margin-left of input box — Girdhar Singh Rathore, Jul 29 '15 at 08:38

score 1 · Answer 1 · answered Jul 29 '15 at 08:37

1

An input element is an inline element by default. A div is a block level element. So change your css to this:

#search-bar {
    height: 50px;
    width: 60%;
    max-width: 800px;

    background-color: white;
    border: 2px solid rgb(230, 230, 230);
    border-radius: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20%;
    display:block;
}

Note: display:block;

answered Jul 29 '15 at 08:37

user3065931

531
7
20

You just beat me to the answer :) – Michaël Hompus Jul 29 '15 at 08:38

score 1 · Answer 2 · answered Jul 29 '15 at 08:41

1

Just add display: block; to your #search-bar definition. Input is basically line element, that means margin: auto; has no effect.

answered Jul 29 '15 at 08:41

Klika84

33
1
8

score 0 · Answer 3 · edited May 23 '17 at 11:51

0

Inputs by default have style: display: inline-block;

Divs on the other hand, by default have style: display: block

The difference is in how much of container does each style takes. You can see their differences here

If you want the same behaviour, you just have to put style="display: block" in your input element and override its default style.

edited May 23 '17 at 11:51

Community

1
1

answered Jul 29 '15 at 08:42

Jonathan La'Fey

542
5
13

score 0 · Answer 4 · answered Jul 29 '15 at 09:40

0

You can also add #container { text-align: center; } if you want to keep input tag inline. In this case you can get rid of left and right margins of input tag and put something next to it (may be button).

answered Jul 29 '15 at 09:40

Lunokhod

495
3
7

'Div' and 'Input' tag acting differently

4 Answers4