为什么<p>和<h1>元素会导致布局出现空白？
如果我有以下html:
<body>
<div id="mainTop">
</div>
<div id="main">
<h2>
<%= Html.Encode(ViewData["Message"]) %></h2>
<p>
To learn more about ASP.NET MVC visit
http://asp.net/mvc</a>.
</p>
</div>
<div id="mainBottom">
</div>
</body>
使用以下CSS:
#mainTop
{
background: url('/Content/Images/bg_top.png') no-repeat;
width: 963px;
height: 65px;
margin: 0 auto;
text-align: left;
color: #5d676d;
}
#main
{
background: url('/Content/Images/bg_middle.png') repeat-y;
width: 963px;
min-height: 50px;
margin: 0 auto;
}
#mainBottom
{
background: url('/Content/Images/bg_bottom2.png') no-repeat;
width: 963px;
height: 128px;
margin: 0 auto;
}
它看起来像这样:
为什么像<p>和标题标签这样的标签会导致我的布局出现空白？理想情况下,我希望在我的内容之间没有那些巨大的空间.
Joe*_*ool 17
默认情况下,<p>与<h2>(其中包括)有边距和与它们相关的垫衬.尝试将以下内容添加到CSS中:
p, h2 {
margin: 0px;
padding: 0px;
}
填充不会影响元素的边框和背景,但根据您的需要,您可能希望尝试删除它们,就像我在这里一样.
编辑:正如Guffa 在下面的答案中指出的那样,段落和标题的边距到达其容器DIV之外的原因是由于边缘崩溃.