gpt4 book ai didi

html - 边距和填充行为

转载 作者:太空宇宙 更新时间:2023-11-04 02:30:54 26 4
gpt4 key购买 nike

我从边距中得到奇怪的行为。即使我不在底部附近,也会出现一个垂直滚动条。考虑到我对此进行了测试并在最新版本的 Chrome、IE11 和 Firefox 中得到了相同的结果,我认为这是期望的行为。

下面的代码产生了一个滚动条

<html>
<head>
<style>
body {
margin: 0;
height: 100%;
padding: 1px;
}

div {
margin: 15px;
}
</style>
</head>
<body>
<div>Hmm</div>
</body>
</html>

bodypadding 更改为 0.1px 会导致没有边距。将 bodypadding 更改为 0px 也会产生边距。此外,只要 padding 不为零,将 box-sizing: border-box 添加到 body 即可删除滚动条。

我没有添加 fiddle ,因为我无法在那里复制它。您需要在一个简单的 html 文件中对此进行测试。

这实际上是预期的行为吗?是否有合理的解释为什么他们会这样实现?

最佳答案

看起来您看到滚动条的原因是定义 height 和设置 padding 值的组合。 height 属性指示元素内容的高度,不包括添加到该值的边距和填充。添加padding后出现滚动条是因为你把元素高度的内容设置为页面的100%,再加上padding,导致元素整个高度溢出。

此外,将 box-sizing 应用于元素会使 heightwidth 属性包括 padding值(value)。有趣的是,它不包括 margin。因此,如果您要申请:

body {
box-sizing: border-box,
margin: 1px,
padding: 0
}

您仍然会看到滚动条。一旦了解元素的 height 属性在默认情况下仅指示元素内内容的高度,它就更有意义了。

希望这有帮助:)

关于html - 边距和填充行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36534125/

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