div元素中多余空间的解决方案

Question

在我的应用程序中，我使用

div

元素。 div 元素下方和上方有一些额外的空间。

如何删除它？

谢谢

Answer 1

每个浏览器都有自己的各种元素的边距和填充的默认值。所以除非你明确设置例如。

div {
margin:0;
padding:0;
}

在 CSS 样式表中，div 的下方和上方会有一些间距。

更烦人的是，每个不同的浏览器对于 div 的 padding 和 margin 有不同的默认值，例如。 Firefox 可能有 10px 边距，IE 可能有 8px 边距。

我发现最好首先在样式表顶部将所有这些默认值重置为零。例如。

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
}

事实上，为此我使用了出色的Blueprint CSS，因为它包含一个reset.css 文件，可以实现这一点！

Answer 2

可能通过某些 CSS 样式向 div 应用了一些边距。

Answer 3

假设您可以访问页面本身的 html，请尝试标记上的

margin

或

padding

css 样式。例如

<div style="padding-top:0px;">my div with no padding at top</div>

请参阅 http://www.w3schools.com/css/css_margin.asp 和 http://www.w3schools.com/css/css_padding.asp 了解更多详情

附注如果您使用的是 Firefox firebug 是一个很好的工具，可以检查/更改这些值并查看页面会发生什么情况

Answer 4

听起来好像通过 CSS 为 div 元素提供了边距或填充。浏览一下你的 CSS 文件，看看是否有类似这样的内容：

div {
    margin: [...];
    padding: [...];
}

只需删除边距/填充定义或根据需要调整值即可。

Answer 5

<div style="margin:0;padding:0;border:0;">My div has no padding</div>

如果您打算定期执行此操作，请在 CSS 文件中为其创建一个类。

Answer 6

如果您遇到此问题，您只需将下面的 css 应用到 div 即可。

<div className={classes.logo}>
 <img src={logo} alt="logo" />
</div>

// in css
.logo {
 display: flex;
}