段落中有一个空间，不应该存在

Question

我的html网页遇到了这个问题。当按下按钮时，我有JavaScript来显示文本。问题是，当我运行页面时，它会将按钮更改为文本，但它会在预加载的文本和插入的文本之间添加一个空格。我正在使用Notepad ++，但我认为这没有帮助。我也在使用Chrome，这可能是问题，但我不确定。

该文件的链接位于：http://pastebin.com/UqrRguRD

此处的信息也只是随机的。我正在做这件事，我需要建立一个网站，但我遇到了这个错误。

Answer 1

解决方案

移动结束</p>代码并将div元素替换为span，其中显示inline而不是block（explanation）：

HTML

<span id="whatido"><button onclick="whatIDo()">What do I do?</button></span>
<button onclick="displayResult()">Madlib</button>
<span id="madlib"></span></p>

您还可以在css中将按钮的display属性设置为block，以确保它们不与您的文字内联。

CSS

button{
    display:block;
}

JSFiddle

---

解释

div元素不会水平堆叠，它们默认设置属性display:block，这使得它们占据整个空间并清除它们的边。要解决此问题，请使用div元素替换span个元素。 span元素默认位于display:inline，这使得它们排成一行而不是整个块空间

注意：a div element is not considered valid inside a p tag.

---

W3Schools的定义

<span>标记用于对文档中的内嵌元素进行分组。

<div>代码在HTML文档中定义分部或部分。

<div>标记用于对块元素进行分组，以使用CSS对其进行格式化。

来源：

http://www.w3schools.com/tags/tag_div.asp

http://www.w3schools.com/tags/tag_span.asp

Answer 2

在HTML中，将<div>等块级元素放在段落标记<p>中是无效的。 Web浏览器会在<div id="whatido">导致空间之前自动关闭段落标记。解决此问题的一种方法是对<span>使用<div>而不是#whatido，这是有效的HTML。

Answer 3

在您的代码中添加此内容

<style>
 p {margin: 0px;}
</style>

Answer 4

或：p{margin:0;padding:0;}

fiddle