There's a space inside of a paragraph that's not supposed to be there

Question

I've been having this problem with my html webpage. I have JavaScript to display text when a button is pushed. The problem is, when I run the page it changes the button to the text, but it adds a space between the preloaded text and the inserted text. I am using Notepad++, but I don't think that helps. I'm also using Chrome, which may be the problem but I'm not sure.

The link to the file is here: http://pastebin.com/UqrRguRD

Also the information in there is just random stuff. I'm doing this thing and I needed to make a website, but I'm having this error.

create a fiddle. Your reference to "main.css" is not useful at all — karthikr, Jun 11 '13 at 14:12
Move the closing p tag to be after the word "information", rather than after the div #whatido. — Nick R, Jun 11 '13 at 14:13

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Solution

Move the closing </p> tag and replace div elements by span, which are displayed inline instead of 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>

You can also set the display property of your buttons to block in your css to ensure they're not inline with your text.

CSS

button{
    display:block;
}

JSFiddle

Explanation

div elements will not stack horizontally, they have the property display:block set by default which makes them take a whole space and clear their sides. To fix this issue, replace div elements by span elements. The span elements are in display:inline by default which makes them line up instead of taking a whole block of space

NOTE: a div element is not considered valid inside a p tag.

W3Schools' definitions

The <span> tag is used to group inline-elements in a document.

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.

Sources:

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

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

Can I ask why you replace div with span. What are the differences? — JacksonML, Jun 11 '13 at 14:20
@JacksonML Take a look at my fresh edit where I explain the difference. — Jeff Noel, Jun 11 '13 at 14:21

score 0 · Answer 2 · answered Jun 11 '13 at 14:17

In HTML it is invalid to place a block level element such as <div> inside of a paragraph tag <p>. The web browser automatically closes your paragraph tag before <div id="whatido"> causing the space. One way to fix this is to use <span> instead of <div> for #whatido which is valid HTML.

score 0 · Answer 3 · answered Jun 11 '13 at 14:28

0

Add this in your code

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

answered Jun 11 '13 at 14:28

Deepak Mallah

3,926
4
21
26

score -1 · Answer 4 · answered Jun 11 '13 at 14:22

-1

or: p{margin:0;padding:0;}

fiddle

answered Jun 11 '13 at 14:22

Alessandro Gabrielli

892
6
7

@Ghillied please can you explain me what do you mean by: "it's not valid in html4" and "adds empty p elements everywhere in the code"? – Alessandro Gabrielli Jun 11 '13 at 14:44
@Ghillied I flag your comment as uncostructive, not only because you didn't provide an explication about it but also because it is false: if you validate here(http://validator.w3.org/check), for html 4 stict, this code, it will result valid: ** My first HTML document
Hello world!
** – Alessandro Gabrielli Jun 11 '13 at 20:01
in addition, "
" elements are added by the coder, it's senseless saying "the method adds empty p elements everywhere in the code"
– Alessandro Gabrielli Jun 11 '13 at 20:08
[The P element represents a paragraph. It cannot contain block-level elements (including P itself). We discourage authors from using empty P elements. User agents should ignore empty P elements.](http://www.w3.org/TR/html401/struct/text.html#h-9.3.1) . The empty `
` tags are created by the browser itself since it finds a `block-element` inside the `
`. I am still wondering how my comment is not constructive. I sadly can't provide explanations right on time when you ask for them.
– Jeff Noel Jun 11 '13 at 20:28
@Ghillied I'm sorry that you provided it late, anyway: 1)giving margin:0 and padding:0 to a
element doesn't mean to have an empty
element. 2)As the same site from where you provided the infos, it validate the code, probably I suggested a right solution, 3)especially because this code(the code from the question) is not wrong if you try to validate it: "
Helloa world!
" Reassuming: The code that I suggested doesn't 'adds empty p elements everywhere' and it is also valid, so your comment was not right. – Alessandro Gabrielli Jun 11 '13 at 21:01

There's a space inside of a paragraph that's not supposed to be there

4 Answers4

Solution

HTML

CSS

Explanation

W3Schools' definitions