导航栏上的按钮导致导航栏高度增加答案

【问题标题】：Button on navbar causes navbar height to increase导航栏上的按钮导致导航栏高度增加
【发布时间】：2020-04-11 18:02:00
【问题描述】：

我在使用 Bootstrap 的导航栏上参考以下示例：

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h

复制 HTML，我把它放在我的 JSP 页面中。以下是最终的 HTML：

<html>

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js"></script>

<title>2</title>
</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-success" type="submit">Search</button>
  </form>
</nav>
<br>

<div class="container">
  <h3>Navbar Forms</h3>
  <p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>

</body>
</html>

在 IE 和 Google Chrome 上，导航栏的高度都大于示例中的高度，控件下方有多余的空格，如下所示。我发现这是由于按钮。如果按钮被移除，导航栏的高度将与示例中的相同。什么可能是根本原因，我该如何解决？我正在使用 Bootstrap 4.4。

【问题讨论】：

我无法重现此内容。您能否提供链接或代码 sn-p（例如使用 jsfiddle）？必须有特定的 CSS 规则导致该问题。
你能试试这个，让我知道它是否有效吗？在 chrome 中它对我来说看起来不错：jsfiddle.net/Manju06/13920qbp/2
你在使用 CSS 吗？
请先重新缓存它：CTRL + SHIFT + DEL
这很奇怪。我发现如果我添加，问题就会消失！我试了几次。如果我删除，IE 和 Chrome 都会出现问题。如果我添加它，问题在两个浏览器中都消失了。

标签： html css bootstrap-4

【解决方案1】：

这是因为浏览器默认的 CSS 也称为用户代理样式表。

我发现如果你使用<!DOCTYPE html>，这个空格被删除了，因为HTML5的用户代理样式表中表单元素的下边距是0px；

如果我不使用<!DOCTYPE html>，它会考虑HTML4 的用户代理样式表，其中表单元素的下边距是1em。

所以现在你可以选择是否必须使用<!DOCTYPE html>。

否则另一种解决方案是在表单元素中使用class="mb-0"，它是为任何元素设置margin-bottom: 0px; 的bootstrap-4 类。

【讨论】：

但我认为只是说呈现的页面是 HTML。你的意思是说的存在意味着它是 HTML5？
是的，正是以 HTML5 呈现页面。
随时欢迎老兄。