CSS - 如何删除元素之间不需要的边距？
这似乎是一个常见问题,但我找到的解决方案都没有对我有用.
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
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;
}
我故意打破图像路径并为.headerdiv 设置背景颜色,以便我可以看到它们是否在触摸.这就是我的页面的样子:
正如您所看到的,我已经尝试将两者的填充和边距设置divs为0.
为什么还有差距？
Jea*_*aul 19
这是由于以下原因:
浏览器会在每个
<p>元素之前和之后自动添加一些空格(边距).可以使用CSS(带边距属性)修改边距.
所以尝试:
p {
margin: 0px;
}
注意:浏览器也会在其他元素上添加默认样式!这在不同情况下既有用又烦人.有三种方法可以解决这个问题:
- 完全删除浏览器可能具有的任何默认样式.这是通过使用重置样式表来完成的.最受欢迎的是Eric Meyer的CSS Reset.如果您想全力以赴并在任何浏览器中完全干净,请使用Meyer的技术.这种方法优于使用慢速
*{ margin:0; padding:0; }重置方法(请阅读此处原因) 将样式表规范化为您自己的默认值.Webdesigners的一大烦恼是不同的浏览器使用不同的默认样式.但是,完全重置会带来重新定义所有元素样式的耗时.因此,您可以使用一组预定义的一致且合理的默认样式来规范化浏览器的所有默认样式.常见的方法是使用normalize.css(Twitter,Github和SoundCloud使用它!)
必要时调整默认值或有意识地使用默认值.使用默认值的最常见方式(不是说它是最好的方法)是知道它们存在并在必要时进行调整.默认样式有一个原因:它们可以帮助开发人员快速获得他们所追求的外观.外观稍微偏了吗？只需相应调整样式即可.但是,请确保为正确的元素使用正确的标记.例如,不应删除内联文本的
<p>边距,而应使用标记(无默认值)<span>margin
这应该可以帮助您了解幕后发生的事情.
- 谢谢!现在我知道导致问题的原因我可以找到一个不涉及从<p>标签中删除边距的解决方案. (2认同)
- 谢谢!我知道<p>标签有一个默认的边距,但我不知道它可以延伸到父div的宽度/高度之外.我被困在这一小时lol.+1 (2认同)
小智 6
段落中的边距溢出div(这是正常的)你可以设置
p {
margin: 0;
}
或者将溢出应用于你的div
div {
overflow: hidden;
}