为什么 css 上的边距不适用于 div答案

【问题标题】：Why the margin on css doesn't work properly for div为什么 css 上的边距不适用于 div
【发布时间】：2020-08-31 01:05:17
【问题描述】：

<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，它的工作原理，谁能解释为什么会发生这种情况？

【问题讨论】：

标签： html css

【解决方案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][2]** 的担忧： *为什么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/

【讨论】：

但是为什么 textAreaWrapperPanel 的蓝色似乎只适用于 h3，因为我期望蓝色应该覆盖“顶部”部分，因为它没有边距和填充
@dramasea 你试过用overflow:auto; 代替你的.textAreaWrapperPanel 吗？
可以，但是如果我没有放，我能知道有什么问题吗？
@Roko C. Buljan 哈哈，你甚至把我打到了块级部分，我现在应该放弃了，这是一个很好的答案。
@dramasea - 您要查找的术语是 "Collapsing Margins"。它在 Stack Overflow 上被多次介绍。

【解决方案2】：

我认为您的问题是它们之间已经存在 0 个空格？两个 div 都具有相同的背景颜色，内部的没有边框。试着把里面的颜色做成不同的颜色，只是为了看看。我敢打赌它不会有上限。默认情况下，只是您的 H3 标签有边距。

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

display: inline;

这将导致它同时删除背景区域和边距，而无需重置任何内容。就目前而言，两个 div 相互接触，但是您的 textblockheader 类中的白色边距正在添加额外的空间，从而获得默认的边距颜色，即白色。

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

【讨论】：

内层div其实有不同的颜色->蓝色，如果h3默认有边距，为什么内层div顶部还有一个空格？
@dramasea 看起来你是对的，抱歉没有像我应该的那样仔细阅读你的 css。相应地进行了编辑。
谢谢，页边有没有相互接触的参考，让我知道更多？
@dramasea 你可以试试 W3Schools w3schools.com/html/html_blocks.asp, w3schools.com/cssref/pr_class_display.asp，但这是我使用 HTML 的经验，所以我无法给出具体的参考。
@dramasea 这给出了所有 HTML5 块级元素的列表，所以你知道在哪里寻找这种东西：developer.mozilla.org/en-US/docs/HTML/Block-level_elements

【解决方案3】：

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

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

【讨论】：