Html CSS - 如何删除元素之间不需要的边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17971829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - How to remove unwanted margin between elements?
提问by user2638233
This seems to be a common problem but none of the solutions I found have worked for me.
这似乎是一个常见问题，但我找到的解决方案都没有对我有用。
HTML
HTML
<html>
<head>
<link rel="stylesheet" href="c/lasrs.css" type="text/css" />
</head>
<body>
<div class="header">
<img src="i/header1.png">
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus.
Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,
massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et,
bibendum at, posuere sit amet, nibh.</p>
</div>
</body>
</html>
CSS
CSS
body {
min-width: 950px;
background-color: #FFFFFF;
color: #333333;
}
.header {
width: 950px;
height: 171px;
margin: 0px auto;
padding: 0px;
background-color: #CCCCCC;
position: relative;
}
.content {
width: 950px;
margin: 0px auto;
padding: 0px;
background-color: #E3EEF9;
position: relative;
}
I deliberately broke the image path and set a background colour for the .headerdiv so that I could see if they were touching. This is what my page looks like:
我故意打破图像路径并为.headerdiv设置背景颜色，以便我可以看到它们是否在接触。这是我的页面的样子：
As you can see I've tried setting the padding and margins on both divsto 0.
如您所见，我已尝试将两者的内边距和边距都设置divs为 0。
Why is there still a gap?
为什么还有差距？
回答by Jean-Paul
This is due to the following:
这是由于以下原因：
Browsers automatically add some space (margin) before and after each
<p>element. The margins can be modified with CSS (with the margin properties).
浏览器会自动在每个
<p>元素前后添加一些空格（边距）。边距可以用 CSS 修改（使用边距属性）。
So try:
所以尝试：
p {
margin: 0px;
}
Note: browsers add default styling on other elements too!This can be both useful and annoying in different situations. There are three ways to go about this:
注意：浏览器也会在其他元素上添加默认样式！这在不同情况下既有用又烦人。有三种方法可以解决这个问题：
- Completely remove any default styles that the browsers might have. This is accomplished by using a Reset Stylesheet. The most popular one is Eric Meyer's CSS Reset. If you want to go all out and have a completely clean startin any browser, use Meyer's technique. This method is preferred over using the slow
*{ margin:0; padding:0; }reset approach (Read here why) Normalize the stylesheet to your own defaults. A large annoyance of webdesigners is that different browsers use different default styles. However, a complete resetcomes with the time-consuming trouble of redefining the styles of all elements. Therefore, you can normalizeall default styles of the browsers by using a predefined set of consistent and sensible default styles. The common approach is to use normalize.cssfor this (Twitter, Githuband SoundClouduse this!)
Adjust the defaults when necessary or consciously work around the defaults. The most common way (not saying it's the best way) to work with the defaults is to knowthey exist and adjust them when necessary. Default styles are there for a reason: they can help developers to quickly get the looks they are after. Is the look slightly off? Simply adjust the styles accordingly. However, make sure you use the correct tags for the correct elements. For example, instead of removing the
<p>margins for inline texts, you should use the<span>tag (no defaultmargin)
- 完全删除浏览器可能具有的任何默认样式。这是通过使用重置样式表来实现的。最受欢迎的是Eric Meyer 的 CSS Reset。如果您想全力以赴并在任何浏览器中都有一个完全干净的开始，请使用 Meyer 的技术。与使用慢速
*{ margin:0; padding:0; }重置方法相比，此方法更受欢迎（阅读原因） 将样式表规范化为您自己的默认值。网页设计师的一大烦恼是不同的浏览器使用不同的默认样式。然而，完全重置伴随着重新定义所有元素的样式的耗时麻烦。因此，您可以使用一组预定义的一致且合理的默认样式来规范化浏览器的所有默认样式。常用的方法是为此使用normalize.css（Twitter、Github和SoundCloud使用这个！）
必要时调整默认值或有意识地绕过默认值。使用默认值的最常见方法（不是说这是最好的方法）是知道它们存在并在必要时调整它们。默认样式的存在是有原因的：它们可以帮助开发人员快速获得他们想要的外观。外观是不是有点偏？只需相应地调整样式。但是，请确保为正确的元素使用正确的标签。例如，您应该使用标签（无默认值），而不是删除内联文本的
<p>边距<span>margin
That should help you understand what's going on behind the scenes.
这应该可以帮助您了解幕后发生的事情。
回答by Fly1nP4nda
Your margins in the paragraphs are overflowing out of the div (this is normal) you can either set
您在段落中的边距溢出了 div（这是正常的），您可以设置
p {
margin: 0;
}
or apply overflow hidden to your divs
或将溢出隐藏应用到您的 div
div {
overflow: hidden;
}
回答by Roy Sonasish
use
用
*{
padding:0;
margin:0;
}
in your style
以你的风格
回答by Falguni Panchal
try this:
尝试这个：
CSS
CSS
p{
margin:0;
}
OR
或者
* {
margin:0;
padding:0;
}
回答by Michael Unterthurner
Add this:
添加这个：
*{
margin: 0;
padding: 0;
}
回答by UweB
Both divs are touching. The margin/padding of DIVs is always 0 by default, so your modifications have no effect.
The <p>however does have a margin, and as it is nested into the div it looks like the div has a padding.
两个 div 都很感人。默认情况下，DIV 的边距/填充始终为 0，因此您的修改无效。该<p>然而，确实有余量，因为它是嵌套在div它看起来像div有一个填充。
p {
margin: 0;
}
will fix this.
将解决这个问题。
回答by mironcatalin
Try using some reset css, because all browsers come with some default styling link margins, paddings, line-heights, font-styling and you need to start from none-styling elements.
尝试使用一些重置 css，因为所有浏览器都带有一些默认样式链接边距、填充、行高、字体样式，您需要从非样式元素开始。
I recommend using Eric Meyer reset CSS ( http://meyerweb.com/eric/tools/css/reset/)
我建议使用 Eric Meyer 重置 CSS ( http://meyerweb.com/eric/tools/css/reset/)
