Fatal编程技术网
  • html/
  • Html 为什么<；p>；及<；h1>；元素在我的布局中造成间隙？

Html 为什么<；p>；及<；h1>；元素在我的布局中造成间隙？

html css

Html 为什么<；p>；及<；h1>；元素在我的布局中造成间隙？,html,css,Html,Css,如果我有以下html： <body> <div id="mainTop"> </div> <div id="main"> <h2> <%= Html.Encode(ViewData["Message"]) %></h2> <p> To learn more about ASP.NET MVC vis

如果我有以下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中：


p, h2 {
  margin: 0px;
  padding: 0px;
}


填充不会影响元素的边框和背景，但根据您的需要，您可能希望尝试删除它们，就像我在这里所做的那样


编辑：正如Guffa在下面的回答中所说，段落和标题的边距超出其容器div的原因是，您在添加自己的css之前是否尝试过css重置？
为避免类似情况，请使用类似的方法。它将默认CSS设置为跨浏览器可预测的内容。
我（通常）在每个CSS文件开始时使用以下内容，以避免被自动填充/边距捕获：


*
{
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 0;
}


为清晰起见，请编辑：


*
{
   margin: 0;
   padding: 0;
}


做同样的事情。
那是因为。边距不是围绕单个元素的东西，比如填充。相反，边距决定元素之间的距离。如果父元素没有边距或填充（如代码中的div元素），则子元素（h2和p）的边距决定父元素而不是子元素之间的距离

目前，当父元素具有背景集时，通常应该避免折叠页边距，因为IE（至少在版本7之前）无法正确处理折叠页边距


如果您只是在div元素上设置了一些填充（看起来您无论如何都应该这样做），那么边距就不会在它们之外折叠。
问题是因为。h1和p元素上的边距构成了主div的边距。您可以通过删除这些元素上的边距来解决此问题：


h1,p { margin: 0; }


或者通过向div添加边框或填充：


#main { padding: 1px; }



还要确保您的HTML格式正确，您的示例中有一个零散的
。
@KingNestor:另外。。。默认情况下，div没有边距（或填充），因此您可以删除这些指令。示例代码表明，间距在div之间，而不是H1/Phmmm之间，您是对的。最后我针对的是他的书面问题。关于div，我不熟悉这种“margin:0auto”表示法，也许这就是问题所在@King您是否尝试过使用“边距：0px”？由于边距崩溃，边距显示在div级别。你应该把你的答案和Guffa的答案结合起来。@JoeCool:实际上，这些元素上的边距：0会解决这个问题，因为边距崩溃的问题。一开始我没有注意到这一点，因为我测试了一个带有边框的示例，它是不可折叠的？我无法使用您的示例代码重现此问题。“边距：0；填充：0；”不也是这样做的吗？还是有一些浏览器需要枚举？这只是我个人喜好的问题。和太多没有意识到这一点的人一起工作，他们需要详细说明才能理解这一点。这太可怕了。同样，我认为这些人没有必要使用CSS。（尽管作为旁白，我认为root*选择器有点CSS代码的味道）annakata-你指的是我还是那些没有意识到填充的人：0；保证金：0；是同一件事吗？

#main { padding: 1px; }