为什么这两段代码的渲染方式不同？<button>text1</button>
<button>text2</button>与<button>text1</button><button>text2</button>编辑澄清：我们可以在这个 Fiddle中看到：在不同的行中写入控件会在它们之间添加空白（控制台检查无法到达该空白，但可以清楚地看到）在同一行中写入控件则不会。
2 回答
吃鸡游戏
TA贡献1829条经验 获得超7个赞
这是因为浏览器除了特殊情况（例如标签）之外没有换行符或制表符的概念，<pre>因此无论何时找到它们，它都会将它们转换为空格。请记住，它将忽略除第一个之外的所有空格、换行符和制表符。您的代码中可以有 30 个连续换行符和 100 个空格，但在浏览器中它将呈现为 1 个空格。
即使只有换行符但没有空格或缩进的代码在渲染时仍会显示空格。
示例：带有换行符但没有空格的代码：
<button>text1</button> <button>text2</button>
由于换行，它仍然会在它们之间呈现 1 个空白字符。您可以在小提琴中验证这一点。
通常，像这样的任何类型的格式都是由 CSS 处理的。
catspeake
TA贡献1111条经验 获得超0个赞
HTML 中的“EOL”你必须告诉它，尝试放在<br>按钮之间。
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Case 1</h1>
<button>text1</button>
<br>
<button>text2</button>
<h1>Case 2</h1>
<button>text1</button>
<br>
<button>text2</button>
</body>
</html>
- 2 回答
- 0 关注
- 112 浏览
添加回答
举报
0/150
提交
取消