在HTML5网页中添加CSS边框更改定位 [英] Adding CSS border changes positioning in HTML5 webpage
问题描述
我在HTML 5文档中添加边框时页面元素移动有问题。
我预计包含标题元素（灰色）出现在屏幕的顶部，但似乎从内部div（红色）采取边距。但是，如果我添加一个边框到标题，它出现在我期望的地方，红色的内部div只有轻微的移动！
（第一个图像：无边框;第二个图像： ）
我尝试设置相对或绝对定位，使用div的头部元素，设置边缘& padding为0，使用HTML4 doctype等。HTML验证。这是HTML剥离一切，仍然不工作。它发生在最新的Chrome& FF。
帮助！我错过了什么？
<！DOCTYPE HTML>
< html>
< head>
< title> Test< / title>
< / head>
< body>
< header>< div id =mydiv>< / div>< / header>
< div id =content>< p> hello< / p>< / div>
< / body>
< / html>
CSS：
header {background-color：#CCCCCC; width：960px; height：430px;}
#mydiv {width：960px; height：320px; margin：80px 0px 0px 0px; background-color：＃CC0000; }
问题来自 。它很简单：2个相邻的边缘折叠到最高的两个（我说两个，但它实际上可能超过2.它可以是3，它可以是4，或者它可以是100）。
在您的情况下，'#mydivs' margin-top - 80px - $ c> margin-top - 0px。他们是邻接的 - 他们之间没有元素。没有填充。没有边界。
所以边距会折叠。它们折叠到两个（80px）中的最高处，然后应用到父子层次结构中最高的元素 - 在这种情况下是头。
这个问题的一个解决方案是，很明显。你把东西放在边缘之间。
标题{
border-top：0.1em solid rgba（0,0,0,0）;
}
另一个解决方案，新的块格式化上下文。这样，它的利润根本不会与它的孩子的崩溃。
如何创建块格式化上下文？
有四种可能的方式。
1）通过浮动。
2）位置绝对。
3）添加以下显示之一：table-cell，table-caption或inline-block。
4）
所以，为了防止边距崩溃，你可以做那些4的任何人。我通常去数字4（设置溢出为自动）因为它只有副作用...很难成为一个问题。
头{
overflow：auto;
}
这是基本上是父子密钥崩溃，这个规则是很漂亮的 - 完全一样的：2个相邻的边缘折叠到两个边缘中的最高点，这是不是的解决方案。
这里有一个很好的解释边缘崩溃 - http：//www.howtocreate。 co.uk/tutorials/css/margincollapsing
I'm having a problem with the page elements moving when I add a border in a HTML 5 document.
I expected the containing header element (grey) to appear at the top of the screen, but it seems to take the margin from the inner div (red). However if I add a border to the header it appears where I expect and the red inner div only moves slightly!
(1st image: without border; 2nd image: with border)
I have tried setting relative or absolute positioning, using a div instead of the header element, setting margins & padding to 0, using a HTML4 doctype etc. The HTML validates. This is the HTML stripped of everything and still doesn't work. Its happening in latest Chrome & FF.
HELP!! What have I missed?? Or any workarounds (other than keeping the border)?
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<header><div id="mydiv"></div></header>
<div id="content"><p>hello</p></div>
</body>
</html>
CSS:
header {background-color:#CCCCCC; width:960px; height:430px;}
#mydiv {width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000; }
The issue comes from something called "margin collapsing". It's simple: 2 adjoining margins collapse to the highest of the two (I say two, but it could actually be more than 2. it could be 3, it could be 4, or it could be 100 for that matter).
In your case, '#mydivs' margin-top - 80px - is touching the 'header's margin-top - 0px. They're adjoining - there's no element between them. There's no padding. There's no border.
So the margins collapse. They collapse to the highest of the two (80px), and it is then applied on the highest of the elements in the parent-child hierarchy - that's the header in this case.
One solution to this problem is, well, pretty obvious. You put something between the margins. Either some padding, or a border on the header works fine.
header {
border-top: 0.1em solid rgba(0,0,0,0);
}
Another solution, and actually my preferred one, is to make the parent element create a new block formatting context. That way, it's margins simply won't collapse with it's child's.
How do you create a block formatting context? There are four possible ways.
1) By floating it.
2) "position absoluting it".
3) adding one of these displays: "table-cell", "table-caption", or "inline-block".
4) or adding an overflow other than visible.
So, to prevent the margins from collapsing you could do anyone of those 4. I usually go for number 4 (set overflow to auto), as it's only side affect... well it's improbable to become a problem.
header {
overflow: auto;
}
That's basically it for parent-child margin collapsing. But there's also margin collapsing between siblings. The rule is pretty - well, exactly much the same: 2 adjoining margins collapse to the highest of the two. It's the solutions that are not.
Here's a great explanation of margin-collapsing - http://www.howtocreate.co.uk/tutorials/css/margincollapsing
这篇关于在HTML5网页中添加CSS边框更改定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
