为什么< p>和< h1>元素会导致我的布局中的差距？ [英] Why do the <p> and <h1> elements cause gaps in my layout?
问题描述
如果我有以下html：
If I have the following 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;
}
它看起来像这样：
为什么某些标签c $ c>< p >和标题标签会导致我的布局中的空白？理想情况下，我希望在我的内容之间不要有那么大的空间。
Why do certain tags like <p> and the heading tags cause gaps in my layout? Ideally, I would like to not have those huge spaces in between my content.
推荐答案
默认情况下 ; p> 和< h2> （以及其他）具有与其相关联的边距和填充。尝试向您的CSS添加以下内容：
By default <p> and <h2> (among others) have margins and paddings associated with them. Trying adding the following to your CSS:
p, h2 {
margin: 0px;
padding: 0px;
}
填充不会影响元素的边框和背景，
Having padding won't affect the border and background of the elements, but depending on what you want, you might want to try removing them as well as I do here.
编辑：作为Guffa 在下面的答案中指出了，原因该段落和标题的边距超出容器DIV的范围是由于折叠边距。
as Guffa pointed out in an answer below, the reason that the margins of the paragraph and heading are reaching outside their container DIVs is due to collapsing margins.
这篇关于为什么< p>和< h1>元素会导致我的布局中的差距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
