如何找出导致元素空间的原因？保证金和填充？

Question

好的，我有一个回复帖子的帖子，帖子文字似乎在顶部和底部有填充，我不想要它...帮助？

CSS

.viewpost {
    margin-bottom:25px;
    width:80%;
    background-color: #000;
    border: 5px solid white;
    display:inline-block;
    }

p.viewpost {
    display:none;
}

PHP

  echo '<div class="viewpost">';
  if(!empty($row['post'])) {
  echo '<p class="">' . $row['post'] . '</p>';
  echo '</div><br />';

Answer 1

只需使用padding: 0和margin: 0来标记需要它。浏览器应用默认样式。我在文档开头使用CSS重置，以确保我没有这样的问题。

您在该页面上的所有p标记上都有默认的上下边距。我使用以下方法过度使用这些元素：

.viewpost p {
  margin: 0;
}

还有轻微的填充物。你也可以添加padding: 0，但是有些空间很好..

为了将来的帮助：只需右键单击元素并“检查”即可。然后，您可以单击dom树并查看该元素和每个相关元素，然后突出显示它们。突出显示显示间距来自何处。然后，您可以查看元素上的所有样式，以查看边距/填充规则是什么以及它们的设置位置（文件，行）。

Answer 2

填充和边距位于您的段落上：

.viewpost p{margin:0;padding:0;}