Making display:inline-block moves the paragraph to left

Question

Why does the div display property inline-block move the paragraph to left which was centered by margin:0 auto without display property.

.content
{
    padding: 20px;
    margin: 0 auto;
    display: inline-block;
    width: 900px;
    height: 2000px;
}

The content is the class id of the div which has some paragraph inside it. When I add display: inline-block the paragraph is moving to the left side. Why is it so?

https://jsfiddle.net/3h1wwgy6/1/

I think this is the same question as http://stackoverflow.com/questions/19076919/marginauto-with-inline-block — neallred, Jun 08 '16 at 18:17
This is not really a duplicate as this explicitly asks the valid question 'WHY?'. I have tried to answer that question here: http://stackoverflow.com/a/37710665/2397550 — Mr. Hugo, Jun 08 '16 at 18:59

David Chelliah · Accepted Answer · 2016-06-08T19:52:14.193

DIV as display:block(block level element) has characteristic/behavior to occupy entire page width. So when you assign auto for margin-left and margin-right, it automatically takes up the available space equally on both sides. So the element will be centered based on width of its parent element.

When you change the display property of a DIV to display:inline-block. It takes up the best of both worlds (block & inline) i.e., You can use a definitive margins, padding like block elements AND it can follow the normal HTML layout flow like any inline element e.g., span or anchor.

So when you say auto to an inline-block, the default automatic behavior for inline-block is to follow the normal flow of the document (i.e., 0px).

Official definition for auto :

Auto margins

Depending upon the circumstances, provision of an auto value instructs the browser to render a margin according to the value provided in its own stylesheet. However, when such a margin is applied to an element with a meaningful width, an auto margin instead causes all of the available space to be rendered as whitespace.

Auto does NOT mean its default value. I have tried to explain what 'auto' means here: http://stackoverflow.com/a/37710665/2397550 — Mr. Hugo, Jun 08 '16 at 19:02
@JoostS Thanks. I have corrected how I referred "auto" in my answer. — David Chelliah, Jun 08 '16 at 19:53

score 2 · Answer 2 · answered Jun 08 '16 at 18:21

2

Use text-align: center on its parent div to center a div with display:inline-block. As @David Chelliah said, display: inline-block makes it act like an inline-element.

answered Jun 08 '16 at 18:21

Sam Malayek

3,595
3
30
46

Making display:inline-block moves the paragraph to left

2 Answers2