帮助理解边距和填充 [英] Help Understanding Margins and Padding
问题描述
我正在开发一个基于书籍布局范例的网站。我有一个div，它构成了这本名为Right_Pane的书的正确页面。在该页面中，我有一个名为＃SB1的子区域，它是Sidebar 1的缩写，具有相关的样式。侧边栏的标题在h2标签内，因此我为＃SB1 h2创建了一个样式。问题是＃SB1 h2的边距设置被忽略。 ＃SB1 h2中的所有其他设置都有效（文本对齐，颜色，背景等），但没有任何边距设置有效。风格目前定义如下：
I am developing a website based on a book layout paradigm. I have a div that forms the right page of the book called Right_Pane. Within that page, I have a subiv called #SB1 that is short for Sidebar 1 with an associated style. The header for the sidebar is within h2 tags so that I created a style just for that called #SB1 h2. The problem is that the margin setting for #SB1 h2 is being ignored. All other settings within #SB1 h2 work (text-align, color, background etc.), but none of the margin settings work. The styles are currently defined below:
＃SB1 {
&margin-top：35px;
background-color：#CCCCCC;
margin-bottom：50px;
}
＃SB1 h2 {
text-align：center;
margin-top：10px;
}
#SB1 {
margin-top: 35px;
background-color: #CCCCCC;
margin-bottom: 50px;
}
#SB1 h2 {
text-align: center;
margin-top: 10px;
}
问题是，当我想要在顶部有10px的边距时，标题紧靠阴影侧边框的顶部。我可以使用10px填充来完成此操作，但我很好奇为什么边距设置不起作用。我知道填充在框内，边距在框外。在这种情况下，我不明白为什么这两种方法都不起作用。
The problem is that the header is tight against the top of the shaded sidebar box when I want a 10px margin at the top. I can accomplish this with a 10px padding, but I am curious why a margin setting does not work. I understand that padding is within the box and margins are outside of the box. In this case, I don't understand why either approach wouldn't work.
问候
Warc1
推荐答案
阅读有关垂直边距折叠的位数。 请注意以下行：
Read the bits about vertical margins collapsing. Note the line:
"如果元素的边距与其父元素的上边距折叠，则框的上边框边缘定义为与父元素相同。"
"If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's."
有关示例，请参阅： http://www.andybudd.com/ archives / 2003/11 / no_margin_for_error /
有关更多说明和示例，请参阅： http://reference.sitepoint.com/css/collapsingmargins
For more explanation and examples, see: http://reference.sitepoint.com/css/collapsingmargins
[当你的头停止旋转时，继续为你的情况使用填充。 :)]
[And when your head stops spinning, go ahead and use padding for your case. :) ]
当然，请注意，当您说某些有效或无效的内容时，您需要说出您正在谈论的浏览器，以及更具体的内容。 标准的遵守和解释因浏览器而异。
Note, of course, when you say something works or doesn't, you need to say which browsers you are talking about, for anything more specific. Adherence to, and interpretation of standards varies from browser to browser.
这篇关于帮助理解边距和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
