底部填充的存在/不存在会改变Chrome上的内部框大小

时间：2016-03-18 03:43:17

标签： html css google-chrome

我再次提醒我为什么讨厌GUI编程。

我已经解决了这个非常简单的HTML测试用例的问题：

<div style="padding:5px;background-color:#ccccff">
  <form>
    <label for="username">Username</label>
    <input name="username" />
    <label for="password">Password</label>
    <input name="username" type="password" />
    <button type="button" id="logout">Login</button>
  </form>
</div>

当我将它输入到jsfiddle的HTML区域时，它会像我期望的那样呈现，一直有漂亮，一致的填充（紫色背后的浅灰色是jsfiddle＆＃39; s默认bakground）： / p>

on-jsfiddle

但是，当我将完全内容 - 不多也不少 - 放入笔记本电脑上服务器的文档根目录中的.html文件中时，然后加载页面，它呈现如下：

on-my-mac

<div>的额外部分在我的标签和控件下面做了什么？为什么差异？

（两个示例均在Chrome版本47.0.2526.106（64位）的相同实例中呈现，在MacBook Pro，OS X 10.8.5上运行。）

对于第一个示例（由jsfiddle提供），Chrome的box-visualizer小部件如下所示：

19-high

对于第二个例子（由我的机器提供服务），盒子可视化器显示：

35-high

但如果我随后从第二个示例中删除填充属性，则内框的高度会降回19px。

无论发生什么事情，它似乎都与底部填充有关，因为：

  • 即使我将填充属性更改为"padding:5px 5px 1px 5px"，内部框也会显示为35px高。
  • 但如果我将填充属性更改为"padding:5px 5px 0px 5px"，则内框高度将恢复为19px。

我不清楚应该从哪里开始调试这个。

（顺便说一句，我已经为border-box尝试了content-box和box-sizing，但这两种选择似乎都没有改变我在任何一个地方观察到的行为。）

1 个答案:

答案 0 :(得分：2)

这实际上是form元素的底部边距。这个底部边距仅出现在quirks mode中，用于呈现您的网页，因为HTML片段中没有DOCTYPE。

div元素不受影响，但是its padding does prevent that bottom margin from collapsing，这就是为什么只有填充在那里才能看到它。删除填充允许它从div中折叠，因此您不会看到div背景中原本会占用的部分。

由于box-sizing对边距没有影响，因此在任何元素上更改它都不会产生任何影响。

通常，每当您使用HTML（和CSS）时，首先要确保的是存在有效的DOCTYPE，它将触发标准模式。在HTML5中，它是<!DOCTYPE html>。

相关问题
最新问题