这似乎是一个常见问题,但我找到的解决方案都不适合我。
<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>
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 设置了背景颜色,以便我可以看到它们是否接触。这就是我的页面的样子:
如您所见,我尝试将
divs
上的填充和边距设置为 0。
为什么还有差距?
这是由于以下原因:
浏览器会自动在每个
元素之前和之后添加一些空格(边距)。可以使用 CSS 修改边距(使用边距属性)。<p>
所以尝试一下:
p {
margin: 0px;
}
注意:浏览器也会在其他元素上添加默认样式!这在不同情况下既有用又烦人。有三种方法可以解决这个问题:
*{ margin:0; padding:0; }
重置方法(请阅读此处原因)将样式表标准化为您自己的默认值normalize.css (Twitter、Github 和 SoundCloud 使用这个!) 必要时调整默认值或有意识地解决默认值。使用默认值的最常见方法(并不是说这是最好的方法)是“知道”它们的存在并在必要时进行调整。默认样式的存在是有原因的:它们可以帮助开发人员快速获得他们想要的外观。是不是眼神有点不对劲?只需相应地调整样式即可。但是,请确保为正确的元素使用正确的标签。例如,您不应删除 内联文本的
<p>
<span>
标签(无默认 margin
)
这应该可以帮助您了解幕后发生的事情。 段落中的边距超出了 div(这是正常的),您可以设置
p {
margin: 0;
}
div {
overflow: hidden;
}
使用
*{
padding:0;
margin:0;
}
按照你的风格
:
*{
margin: 0;
padding: 0;
}
<p>
确实有一个边距,并且由于它嵌套在 div 中,所以看起来 div 有一个填充。
p {
margin: 0;
}
会解决这个问题。
尝试使用一些重置CSS,因为所有浏览器都带有一些默认样式链接边距、填充、行高、字体样式,并且您需要从无样式元素开始。
我建议使用 Eric Meyer 重置 CSS ( http://meyerweb.com/eric/tools/css/reset/
)