将display:inline-block应用于段落会使其向左移动。

Question

为什么使用display属性为inline-block的div会将原本通过margin:0 auto居中的段落向左移动？这与没有display属性有何不同？

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

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

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

- InQusitive

---

我认为这与https://dev59.com/TWIk5IYBdhLWcg3wqPsi是同一个问题。 - neallred

@neallred：是的，请让它复制。 - InQusitive

这并不是一个重复问题，因为它明确地提出了一个有效的问题：“为什么？”我已经在这里尝试回答了这个问题：https://dev59.com/TWIk5IYBdhLWcg3wqPsi#37710665 - Mr. Hugo

Answer 1

作为块级元素，设置display:block属性的DIV具有占用整个页面宽度的特性/行为。因此，当您为margin-left和margin-right分配auto时，它会自动平均占用可用空间两侧。所以该元素将基于其父元素的宽度居中。

当您将DIV的显示属性更改为display:inline-block时，它就像块级元素和内联元素的结合体，即可以像块级元素一样使用明确定义的边距、填充等，并且可以像任何内联元素（如span或anchor）一样遵循正常的HTML布局流程。

因此，当您将inline-block设置为auto时，内联块级元素的默认自动行为是遵循文档的正常流程（即0px）。

auto的官方定义：

自动边距

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

- David Chelliah

---

Auto并不意味着默认值。我已经试图在这里解释“auto”的含义：https://dev59.com/TWIk5IYBdhLWcg3wqPsi#37710665 - Mr. Hugo

@JoostS 谢谢。我已经更正了我的回答中关于“auto”的引用方式。 - David Chelliah

Answer 2

在父级 div 上使用 text-align: center 来居中显示一个具有 display:inline-block 属性的 div。如 @David Chelliah 所说，display: inline-block 使其表现为内联元素。

- Sam Malayek