Question

我刚刚遇到一个我已经解决的CSS问题，但我想知道为什么它首先发生，或者它是一些常见的CSS行为的例子或'gotcha'我应该知道关于。

基本上，如果我没有将<p>标签的边距设置为0px，我需要通过在包含div中添加负上边距来补偿（或者在此处有20px的空间div的顶部）。我发现奇怪的是<p>的边距似乎超出了它的容器。

HTML

<div class="container">
<div class="tab"></div>
<div class="bobble"></div>
<div class="bg">
<p>here is a paragraph la la la la la ...</p>
</div>
</div>

CSS

.container {
margin-top:50px;
}

.tab {
width:39px; 
height:12px; 
background: #ffe4c0; 
border-radius: 3px 3px 0 0; 
margin-left:14px
}

.bobble {
background:#fffc68;
height:22px;
width:22px;
float:right;
border-radius:12px; 
border: 1px solid #f4f1e4;
margin-top:-8px;
margin-right:-4px;   
}

.bg {
background: #F5F3EA; 
min-height: 93px; 
border-radius: 3px; 
width: 100%;
/* margin-top: -20px; this is required if "margin:0px" is not set on <p> */
}

p {
color: #909090; 
padding: 20px; 
font-size: 20px;
margin: 0px; /* why is this required? */
}

Answer 1

这是由于所谓的折叠边距。根据{{3}} ...

当且仅当：
时，两个边距相邻

都属于参与相同块格式化上下文的流内块级框

没有线框，没有间隙，没有填充，没有边框将它们分开（请注意，某些零高度线框（见9.4.2）会被忽略   这个目的。）

都属于垂直相邻的盒子边缘，即形成以下对中的一个：

盒子的上边距及其第一个流入的孩子的上边距

箱子的下边距和下一个流入的兄弟姐妹的上边缘

最后一个流入子项的下边距和父项的下边距（如果父项具有'自动'计算高度

框的顶部和底部边距，它不会建立新的块格式化上下文，并且计算的“min-height”为零，为零   或'自动'计算'高度'，没有流入的孩子

Answer 2

如果我理解你想要段落扩展容器吗？这可以通过添加

来完成

position:absolute;

到

的父div和：

position:relative;

到段落。

http://jsfiddle.net/7jG75/

希望我帮助过。

Answer 3

css继承

未设置段落的余量，因此它是从父容器继承的 http://www.webdesignfromscratch.com/html-css/css-inheritance-cascade/

Answer 4

喜欢这个

<强> working fiddle

<强> CSS

    .container {
margin-top:50px;
}

.tab {
width:39px; 
height:12px; 
background: #ffe4c0; 
border-radius: 3px 3px 0 0; 
margin-left:14px
}

.bobble {
background:#fffc68;
height:22px;
width:22px;
float:right;
border-radius:12px; 
border: 1px solid #f4f1e4;
margin-top:-8px;
margin-right:-4px;   
}

.bg {
background: #F5F3EA; 

border-radius: 3px; 
width: 100%;
    position:relative;
/* margin-top: -20px; this is required if "margin:0px" is not set on <p> */
}

p {
color: #909090; 
padding: 20px; 
font-size: 20px;
margin: 0px; /* why is this required? */


}

Answer 5

因为浏览器有默认样式！如果你没有重置默认的CSS，他们将采取不同的行动！例如，p将具有20px margin-top和margin-bottom in chrome，而15px margin-top margin-bottom in ie！

通常如果你想要不同的版本和平台浏览器看起来一样，你可能有一个重置css来删除浏览器中的所有不同行为！如果你想要与IE8和IE8-bellow兼容，你可能想要这个css http://meyerweb.com/eric/tools/css/reset/，另外你只需要一个标准化的css来制作一个小黑客！

http://necolas.github.io/normalize.css/

为什么<p>的边距会影响包含div的位置？</p>

5 个答案: