CSS中的内联与内联块显示

介绍

display: inline-block 带来了一种新的方法来创建并排的盒子，这些盒子可以根据包含元素中的可用空间正确折叠和包裹。 它使以前使用浮动完成的布局更容易创建。 不再需要清除浮动。

与 display: inline 相比，主要区别在于 inline-block 允许在元素上设置宽度和高度。 此外，与显示：内联 ，顶部和底部边距和填充不被尊重，并且显示：内联块他们是。

现在， display: inline-block 和 display: block 之间的区别在于，使用 display: block，在元素之后会发生换行符，所以块元素不与其他元素相邻。 以下是一些视觉示例：

显示：内联

请注意此处如何不考虑宽度和高度，以及如何存在顶部和底部填充，但在上方和下方的线条上重叠。

span.box {
  display: inline; /* the default for span */
  width: 100px;
  height: 160px;
  padding: 18px;
}

奶酪和葡萄酒乳清干酪丹麦方蒂娜。 Brie cheesy grin paneer squirty cheese taleggio cheesecake goat taleggio goat taleggio。 巴伐利亚 bergkase emmental fromage 芝士蛋糕芝士片 cheesy grin queso caerphilly。

显示：内联块

这里的宽度、高度和内边距都受到尊重，但元素的两个副本仍然可以并排放置。

span.box {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 18px;
}

奶酪和葡萄酒乳清干酪丹麦方蒂娜。 Brie cheesy grin paneer squirty cheese taleggio cheesecake goat taleggio goat taleggio。 巴伐利亚 bergkase emmental fromage 芝士蛋糕芝士片 cheesy grin queso caerphilly。

显示：块

在这里，一切都得到尊重，但元素并没有并排。

span.box {
  display: block;
  width: 100px;
  height: 160px;
  padding: 18px;
}

奶酪和葡萄酒乳清干酪丹麦方蒂娜。 Brie cheesy grin paneer squirty cheese taleggio cheesecake goat taleggio goat taleggio。 巴伐利亚 bergkase emmental fromage 芝士蛋糕芝士片 cheesy grin queso caerphilly。