html – 为什么宽度为1px的边框会将div增加20像素？

发布时间：2020-12-14 23:04:06 所属栏目：资源来源：网络整理

导读：下面的html文档有两个div,一个带边框(id =with),另一个没有(id =without).带边框的div(至少在firefox和chrome上)显着高于带边框的div. 我原本以为它们的高度最多只有2个像素,然而,警报告诉我它们的高度是19像素不同. 我无法弄清楚为什么会这样. 最佳答案默

下面的html文档有两个div,一个带边框(id =’with’),另一个没有(id =’without).带边框的div(至少在firefox和chrome上)显着高于带边框的div.

我原本以为它们的高度最多只有2个像素,然而,警报告诉我它们的高度是19像素不同.

我无法弄清楚为什么会这样.


最佳答案
默认情况下,< h1> element有一个上边距和下边距和these margins are collapsed.有关于边距如何折叠(即合并)的规则.适用于您的示例的规则是：


Parent and first/last child
If there is no border,padding,inline content,or clearance to

  separate the margin-top of a block with the margin-top of its first

  child block,or no border,height,

  min-height,or max-height to separate the margin-bottom of a block

  with the margin-bottom of its last child,then those margins collapse.

  The collapsed margin ends up outside the parent.

在您的示例中,规则可以理解为：
> div#without没有边框,其上边距(为0)与h1的上边距(约为20px)折叠.折叠的保证金最终在div之外.这意味着这些20px不会增加div的高度.
> div #with有一个边框,所以h1的上边距(~20px)在div内部渲染,比预期高20px.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!