显示:内联块将段落向左移动

Question

为什么div显示属性inline-block会将以margin:0 auto为中心的段落向左移动而不显示属性。

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

content是div的类id，其中包含一些段落。当我添加display: inline-block时，该段落正在向左移动。为什么会这样？

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

Answer 1

div作为display:block(块级元素)具有占据整个页面宽度的特性/行为。因此，当您为左边距和右边距指定auto时，它会自动平均占用两边的可用空间。所以元素将基于其父元素的宽度居中。

将DIV的显示特性更改为display:inline-block时。它占据了两个世界的最佳位置(块和内联)，即，您可以使用决定性的边距，像块元素一样填充，并且它可以像任何内联元素一样遵循正常的HTML布局流，例如span或anchor。

因此，当您对内联块说自动时，内联块的默认自动行为是遵循文档的正常流程(即0px)。

汽车的官方定义：

自动边距

根据具体情况，提供自动值会指示浏览器根据该值呈现边距在其自己的样式表中提供。然而，当应用这样的裕度时对于宽度有意义的元素，自动边距会导致将所有可用空间呈现为空白。

Answer 2

在其父div上使用text-align: center使div与display:inline-block居中。正如@David Chelliah所说，display: inline-block使其表现得像一个内联元素。