cshtml文件中的标记中的空格是否有意义？

Question

在尝试为ASP.Net MVC 4项目中的登录表单添加基本标记时，我看到了一些奇怪的行为。这是我的cshtml文件的一部分：

<form class="navbar-form pull-right">
    <input type="text" placeholder="Email" class="span2" />
    <input type="password" placeholder="Password" class="span2" />
    <button class="btn" type="submit">Sign in</button>
</form>

该标记在我的主题中呈现出色：

但是，如果我将其更改为：

<form class="navbar-form pull-right">
    <input type="text" placeholder="Email" class="span2" /><input type="password" placeholder="Password" class="span2" />
    <button class="btn" type="submit">Sign in</button>
</form>

它开始像这样渲染：

我注意到了这一点，因为我试图从基础主题中获取一个简单的表单并使用Html.BeginForm()来实现它。这导致标记全部在一条线上，所以我看到了那种挤压的外观。

我可能只是用一些css来纠正它，但我很好奇是否有人知道我为什么会看到这种行为。有任何想法吗？

Answer 1

在HTML中，任何空格都被视为单个空格。例如：

<div>TestTestTest</div>

每个单词之间不会有空格。

<div>Test Test Test</div>

将有一个空格。

<div>Test     Test
Test</div>

看起来与第二个例子相同。

这同样适用于输入标签：

<!-- No spacing -->
<div>
    <input /><input />
<div>

<!-- Line break converts to a space -->
<div>
    <input />
    <input />
<div>

<!-- Really big font -->
<div style="font-size: 120pt;">
    <input />
    <input />
<div>

JsFiddle Demo

更糟糕的是某些浏览器会在DOM中为您提供TextElement两个<input>标记之间的<div id="foo"> <input /> <input /> </div> 。 E.g。

foo

元素<div id="foo"><input /><input /></div> 将有3个子元素（输入，文本元素，另一个输入） - 其中：

<form>

将有2个子元素。在我尝试通过索引引用子元素并且它正在使用IE而不是Chrome（Pro-Tip：从不这样做）之前，这让我搞砸了。

您应该使用CSS来准确指定元素的布局方式。为您的{{1}}标记分配一个类，并定义您希望该类中的子元素如何流动，以及每个元素之间的边距，填充和间距。

Answer 2

要回答你的问题，不，不应该......但显然它是......所以。我首先检查Firebug中的两个版本，看看你能在那里找到什么。另外，请检查您在布局中是否定义了Doctype。