Question

想象h1位于div：

中

比较两种风格：inline-block有什么问题？

h1 {
  display: block;
  Width: 150px;
  margin: 0 auto
}

h1 {
  display: inline-block;
  Width: 150px;
  margin: 0 auto
}

Answer 1

顾名思义，内联块是内联的。自动边距对内联和内联块框没有影响。

这不是内联块本身的“缺点”或“问题”;这就是内联格式化的工作原理。除了将块容器放在线盒上之外，几乎没有理由使用内联块。

Answer 2

你可以在一个块周围包裹inline-block个样式。这样你仍然可以控制边距。

.wraper { display: block; margin: 0 auto; }
.content { display: inline-block }
<div class="wrapper"><h1></h1></div>

您可以添加尽可能多的内联块，然后才能正常工作。

Answer 3

嗯......有点晚了，但我仍然希望有用。

首先：Jsfiddle上有一个直观的例子。

请记住＆＃34;标题＆＃34;是块级元素（请参阅MDN），因此display:block;有点＆＃34;隐式＆＃34;。

当您添加display:inline-block;时，实际上是删除了＆＃34;块级＆＃34;元素状态因此使其表现不同：在您的特定情况下，margin: 0 auto表示顶部和底部的0像素边距，而左侧的0像素边距和＃34;无论它是什么＆＃34;在右边。就像页面上的任何文字一样。因此，您可以在<h1>标记之后添加一些内容，以使其显示内联（当然）与标题（请参阅JSFiddle示例）。

相反，在display:block;元素上，将计算左边距和右边距，以便元素保留在父元素的中心。

内联块的下行

3 个答案: