显示内联块会生成我无法删除的边距底部

Question

我尝试了显示，浮动，宽度/高度的每个组合，并将所有边距和填充设置为0但是容器带有display：inline-block总是生成一个margin-bottom，我只能通过添加样式来删除＃34; margin-bottom： - ... px＆＃34;

请查看代码，它是非常基本的index.php

无论如何，我对任何解决方案持开放态度，我只想要div＆＃34; .posts＆＃34;包含帖子，如果有没有＆＃34;显示的解决方案：inline-block＆＃34;对我来说没问题。

提前感谢大家

Answer 1

当元素的显示值设置为时，您看到的空间是Adding native code to an existing Worklight hybrid app字母高度的空格，如小写 y 或 g inline-block;。当您将元素设置为display: inline-block;时，您基本上将它视为文本。

要解决此问题，请从display: inline-block; DIV中删除.posts。它不需要你的布局。

Answer 2

首先，你在几个地方使用#post。这是非常糟糕的做法。使用ID应该是唯一的。因此，你将获得真正混合的CSS输出。将它们更改为.post。见https://css-tricks.com/the-difference-between-id-and-class/

其次，.posts应该是display: block，因为你没有排成一排。请参阅：http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

第三，你的.sep有margin: 8px 33px，这正在创造空间。如果删除该边距，则不会有该空格。

Answer 3

想想我可以将此作为答案发布：

我不明白为什么它首先需要inline-block而不是常规block，但是如果它确实如此 - 因为inline-block使元素内联，它从 line-height descender获得额外的高度。如果您设置其父级（在本例中为#main）{}，line-height: 0，您将没有额外的空间。

您必须稍后通过为内部元素提供不同的line-height来弥补此问题，例如.posts { line-height:1.5 }，否则您的文字将没有任何高度。

Answer 4

您可以将<style name="tabItem"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> </style> 属性添加到课程帖子中，并根据您的要求在帖子课程中更改其值