Html 你如何解释这个div间距问题？_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

Html 你如何解释这个div间距问题？

html css twitter-bootstrap twitter-bootstrap-3

Html 你如何解释这个div间距问题？,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,这个间距问题快把我逼疯了。我最终发现，为了在表单元素之间留有空格，我需要格式化我的HTML代码，如下所示有人能解释一下这是怎么回事吗？这是新线新闻吗注意事项：我使用的是Bootstrap3CSS文件，没有其他样式下面两个示例之间的唯一区别在于.formgroupdiv的布局方式 1。带空格的表单元素： <!DOCTYPE html> <html> <head> <title>Elements with spaces</

这个间距问题快把我逼疯了。我最终发现，为了在表单元素之间留有空格，我需要格式化我的HTML代码，如下所示

有人能解释一下这是怎么回事吗？这是新线新闻吗

注意事项：

我使用的是Bootstrap3CSS文件，没有其他样式
下面两个示例之间的唯一区别在于
```
.formgroup
```
div的布局方式

1。带空格的表单元素：

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div><div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div><button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>


带空格的元素
登录

2。不带空格的表单元素：

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Elements with spaces</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <form class="form-inline" role="form">
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
      </div><div class="form-group">
        <input type="password" class="form-control" placeholder="Password">
      </div><button type="submit" class="btn btn-default">Sign in</button>
    </form>
  </body>
</html>


带空格的元素
登录

内联元素对代码中的空白敏感。由于示例中的div通常是块级元素，但它们并排出现，因此CSS很可能会将它们更改为内联显示。您还可以通过使用HTML注释来消除这一差距

<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
  </div><!--
  --><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>

<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
  </div><!--
  --><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>

根据引导文档（），

表单组

用于包装

表单控件

，因此第二种方法更好

您的第一个示例按预期呈现，因为引导CSS设置

内联块

，并且

表单控件本身没有边距。您可以通过在CSS中使用边距来覆盖此行为
.form-inline .form-control {
  display: inline-block;
  margin-right:4px;
}

演示：
根据引导文档（），表单组
用于包装表单控件
，因此第二种方法更好
您的第一个示例按预期呈现，因为引导CSS设置内联块
，并且表单控件本身没有边距。您可以通过在CSS中使用边距来覆盖此行为
.form-inline .form-control {
  display: inline-block;
  margin-right:4px;
}

演示：
作为j08691答案的替代方法，这是我用来防止空白的方法：
<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
</div
><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>



您不会引入不必要的注释，但某些IDE中的自动格式化可能会使缩进有点混乱。
作为j08691答案的替代方法，我使用以下方法来防止空白：
<div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
</div
><div class="form-group">
    <input type="password" class="form-control" placeholder="Password">
</div>



您不会引入不必要的注释，但某些IDE中的自动格式化可能会使缩进有点混乱。
它们可能是内联块元素。您可以为.formgroup发布css吗？它们可能是内联块元素。您可以为.formgroup发布css吗？