gpt4 book ai didi

html - 为什么 1px 宽度的边框会使 div 增加 20 像素?

转载 作者:太空狗 更新时间:2023-10-29 15:35:57 24 4
gpt4 key购买 nike

下面的 html 文档有两个 div,一个有边框 (id='with'),一个没有边框 (id='without)。带边框的 div 呈现(至少在 firefox 和 chrome 上)明显高于带边框的。

我原以为它们的高度最多相差 2 个像素,然而,alert 告诉我它们的高度相差 19 个像素。

我不明白这是为什么。

<!DOCTYPE HTML>
<html>
<head>
<title>Height of divs with/without a border</title>
<script type="text/javascript" src='jquery-1.8.3.js'></script>

<script type='text/javascript'>

$(document).ready(function() {

alert($('#with' ).height() + ' / ' +
$('#without').height());

});

</script>

</head>
<body>

<div style='width:300px;border:black 1px solid;background-color:yellow' id='with'>
<h1>With a border</h1>
bla<br>
bla<br>
bla<br>
</div>

<div style='width:300px;background-color:green' id='without'>
<h1>Without a border</h1>
bla<br>
bla<br>
bla<br>
</div>

</body>
</html>

最佳答案

这是因为嵌套 <h1 /> 的上边距当有边界时包含。注意@Elliott 的 fiddle 不起作用,因为边距已被 jsfiddle 的默认设置删除。

编辑:查看更多信息 http://reference.sitepoint.com/css/collapsingmargins

关于html - 为什么 1px 宽度的边框会使 div 增加 20 像素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13625352/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com