InQusitive InQusitive - 6 months ago 6
CSS Question

Making display:inline-block moves the paragraph to left

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/

Answer

When you change the display property of a DIV from display:block to display:inline-block. It becomes like a normal inline element, with few extra perks.

You can use a definitive margins like margin-left:100px; and that will work. But when you say auto.

The default automatic behavior for inline-block is margin:0