Question

<html>
<head>
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body>
<div class="textAreaWrapper">
<div class="textAreaWrapperPanel">
<h3 class='textblockheader'>Text Block Settings</h3>
</div>
</div>
</body>
</html>

这是我的html代码，下面是我的css代码：

.textAreaWrapper{
    border: 1px solid black;
    background-color: white;

}

.textAreaWrapperPanel{

    background-color : #093459;
    color: white;
   margin-top:0px;

}

.textblockheader{
   font-family : "Helvetica Neue,Helvetica,Arial,sans-serif";
   font-size: 16px;
   font-weight : normal;

}

我希望textAreaWrapperPanel和textAreaWrapper div元素之间没有空格，但相反，它仍然存在。但是，如果我将textblockheader的margin-top更改为0px，那么有人可以解释为什么会发生这种情况吗？

Answer 1

这导致浏览器默认情况下将H3元素（和其他元素）应用于边距。的 DEMO

您只需使用 CSS重置
即可
要快速查看丑陋的休息，请使用

*{margin:0; padding:0;} /* will apply to all (*) elements */

http://meyerweb.com/eric/tools/css/reset/
http://yuilibrary.com/yui/docs/cssreset/
<小时/> 关于您对 Collapsing Margins 的担忧：
为什么H3父DIV的蓝色背景不能完全覆盖H3元素占用的空间？

因为您将两个block-level元素h3嵌套到div，其中框模型和自然浮动，除非在这三个解决方案中指定：

将overflow:auto;设置为父div

或者将H3元素设置为display: inline-block;

对block-level父元素
使用 clearfix

<强> jsBin PLAYGROUND

/* // uncomment *{margin:0;padding:0;} */ .textAreaWrapper{ border: 1px solid black; background-color: white; } .textAreaWrapperPanel{ /* overflow:auto; */ /* Uncomment this or */ background-color : #093459; color: white; } .textblockheader{ /* display:inline-block; */ /* ... this one or ...*/ font-family : "Helvetica Neue,Helvetica,Arial,sans-serif"; font-size: 16px; font-weight : normal; } /* add this class to your DIV .textAreaWrapperPanel */ .clearfix:before, .clearfix:after { content:" "; display:table; } .clearfix:after { clear:both; }

Micro clearfix资源：http://nicolasgallagher.com/micro-clearfix-hack/

Answer 2

我认为你的问题是他们之间已经处于0空间？两个div都具有相同的背景颜色，内部没有边框。尝试使内部的颜色看起来不同。我打赌它没有上限。只是你的H3标签默认有余量。

编辑：对不起，我误读了你的代码。你是对的，它们是不同的颜色。以下是发生了什么的原因。您的H3元素默认显示为BLOCK级别元素。这使它有自己的背景边距设置为10px顶部和底部。如果你要告诉你的H3类textblockheader：

display: inline;

它会导致它删除背景区域和边距，而不必重置任何东西。因为它的两个div相互接触，但是textblockheader类的白色边缘增加了额外的空间，获得了白色的默认边距颜色。

但是，它是这样做的原因是H3元素的默认css样式作为具有默认顶部和底部边距的块级元素。

Answer 3

标题标签具有默认边距。此链接可能有所帮助：Default Heading Styles

同时重置标记的默认css值可以避免类似的未来错误：Reset CSS

为什么css上的边距对div不起作用

3 个答案: