为什么 css 上的边距对于 div 不能正常工作

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>

This is my html code, and below is my css code:这是我的 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;

}

I expect there will me no space between textAreaWrapperPanel and textAreaWrapper div elements, but instead, it still have.我希望textAreaWrapperPanel和textAreaWrapper div 元素之间没有空格，但它仍然有。 But if I change textblockheader 's margin-top to 0px , its work, can anyone explain why this happen?但是如果我将textblockheader的 margin-top 更改为0px ，它的工作，谁能解释为什么会发生这种情况？

Answer 1

That's cause the browser applies to H3 elements (and other elements) a margin by default.这就是默认情况下浏览器对H3元素（和其他元素）应用边距的原因。 DEMO演示

All you need is to use a CSS Reset您只需要使用CSS 重置

To quickly view an ugly rest just use要快速查看丑陋的休息，只需使用

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

http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/tools/css/reset/
http://yuilibrary.com/yui/docs/cssreset/ http://yuilibrary.com/yui/docs/cssreset/

Regarding your concerns about **[Collapsing Margins][2]**: *Why the blue background of the H3's parent DIV does not fully cover the space taken by the `H3` element?* 关于您对 **[Collapsing Margins][2]** 的担忧：*为什么 H3 的父 DIV 的蓝色背景没有完全覆盖 `H3` 元素占用的空间？*

That's cause you're nesting two block-level elements: h3 into div , where the box models and natural floats are being handled by the browser unless specified like in this three solutions:这是因为您将两个block-level元素嵌套： h3到div ，除非在这三个解决方案中指定，否则浏览器正在处理盒模型和自然浮点数：

Set overflow:auto;设置overflow:auto; to the parent div到父div
Or set your H3 element as display: inline-block;或者将您的H3元素设置为display: inline-block;
Use a clearfix for the block-level parent element对block-level父元素使用clearfix

jsBin PLAYGROUND jsBin 游乐场

/* // 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 resource: http://nicolasgallagher.com/micro-clearfix-hack/微清修复资源： http ://nicolasgallagher.com/micro-clearfix-hack/

Answer 2

I think your problem is that they are already at 0 space between?我认为你的问题是它们之间已经是 0 空间了？ The two divs both have the same background color and the inner one has no border.两个 div 的背景颜色相同，内部的 div 没有边框。 Try making the inner one a different color just to see.试着让内部的颜色不同，只是为了看看。 I bet it will have no upper margin.我敢打赌它没有上限。 It's just your H3 tag that by default has a margin.默认情况下，这只是您的 H3 标签。

EDIT: Sorry I misread your code.编辑：抱歉，我误读了您的代码。 You are correct, they are different colors.你是对的，它们是不同的颜色。 Here is the WHY of what's going on.这是发生了什么的原因。 Your H3 element is by default presenting as a BLOCK level element.您的 H3 元素默认显示为 BLOCK 级别元素。 This causes it to have its own background margin that is set to 10px top and bottom.这导致它有自己的背景边距，设置为 10px 顶部和底部。 If you were to tell your H3 class textblockheader to:如果您要告诉您的 H3 类 textblockheader：

display: inline;

It would cause it to remove the background area and margins as well without having to reset anything.它会导致它删除背景区域和边距，而无需重置任何内容。 As it stands the two divs are touching each other, but the white margin from your textblockheader class is adding extra space that gets the default margin color which is white.就目前而言，这两个 div 相互接触，但是 textblockheader 类的白色边距增加了额外的空间，以获得默认的白色边距颜色。

But yeah, the reason it's doing that is the default css styling of H3 elements as block level elements with a default top and bottom margin.但是是的，它这样做的原因是 H3 元素的默认 css 样式作为块级元素，具有默认的顶部和底部边距。

Answer 3

The heading tags have default margins.标题标签有默认的边距。 This link might help: Default Heading Styles此链接可能有帮助：默认标题样式

Also resetting the default css values of tags may avoid similar future errors: Reset CSS重置标签的默认 css 值也可以避免类似的未来错误：重置 CSS

为什么 css 上的边距对于 div 不能正常工作

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-03-30 16:42:59

解决方案2
1 2014-03-30 16:45:05

解决方案3
0 2014-03-30 16:47:59

为什么 css 上的边距对于 div 不能正常工作

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-03-30 16:42:59

解决方案2 1 2014-03-30 16:45:05

解决方案3 0 2014-03-30 16:47:59

解决方案1
3 已采纳 2014-03-30 16:42:59

解决方案2
1 2014-03-30 16:45:05

解决方案3
0 2014-03-30 16:47:59