CSS-如何删除元素之间的多余边距? [英] CSS - How to remove unwanted margin between elements?
问题描述
这似乎是一个普遍的问题，但是我发现的任何解决方案都不适合我.
This seems to be a common problem but none of the solutions I found have worked for me.
<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
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;
}
我故意破坏了图像路径，并为 .header div设置了背景色，以便查看它们是否在触摸.这是我的页面的样子:
I deliberately broke the image path and set a background colour for the .header div so that I could see if they were touching. This is what my page looks like:
如您所见，我已经尝试将两个 divs 的填充和边距设置为0.
As you can see I've tried setting the padding and margins on both divs to 0.
为什么还有差距?
Why is there still a gap?
推荐答案
这是由于以下原因造成的:
This is due to the following:
浏览器会在每个
< p>元素之前和之后自动添加一些空间(边距).可以使用CSS(带有margin属性)修改页边距.
Browsers automatically add some space (margin) before and after each
<p>element. The margins can be modified with CSS (with the margin properties).
所以尝试:
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:
- 完全删除浏览器可能具有的所有默认样式.这是通过使用重置样式表完成的.最受欢迎的是 Eric Meyer的CSS重置 .如果您想全力以赴，并且在任何浏览器中都有完全干净的开始，请使用Meyer的技术.此方法优于使用慢速
* {margin:0;填充:0;}重置方法(在此处阅读原因) -
将样式表标准化为您自己的默认值.Web设计人员的一大烦恼是不同的浏览器使用不同的默认样式.但是，完全重置会带来重新定义所有元素样式的耗时问题.因此，您可以使用一组预定义的一致且合理的默认样式 normalize 浏览器的所有默认样式.常见的方法是为此使用 normalize.css ( Twitter ， Github 和 SoundCloud 使用此功能！)
- 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 start in 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 reset comes with the time-consuming trouble of redefining the styles of all elements. Therefore, you can normalize all default styles of the browsers by using a predefined set of consistent and sensible default styles. The common approach is to use normalize.css for this (Twitter, Github and SoundCloud use 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 know they 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 default margin)
这应该可以帮助您了解幕后发生的事情.
That should help you understand what's going on behind the scenes.
这篇关于CSS-如何删除元素之间的多余边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
