<p> </p> tag in div

Question

I have an ajax htmlextender on my page. Commenting something with it. When comment text has "enter" htmlextender gives it < p > tag. I use divs while showing comments.

 <div style="background-color:#ff0000; width:95%;"><p>note line 1</p><p> note line 2</p></div>
 <div style="background-color:#ff0000; width:95%; text-align: right; font-size: 11px;">Name Surname</div>
 <div style="background-color:#ff0000; width:95%; text-align: right; font-size: 11px;">02.08.2012 10:04</div>

The output like this:

How can i clear the empty line?

Answer 1

Remove the paragraphs' margin and/or padding:

p {margin: 0; padding: 0}

Answer 2

You can remove the margin from the p element. you might also want to remove the padding is there is any (it's not there by default). It is a good idea to be sure none the less.

A good tool for checking what styles that are applied, are the browsers developer tools. In firebug andothers, you can inspect the element to get a list of applied styles. If you are in Windows you can get this by pressing F12.

Just add this to your CSS file. Or include it in the header.

p { margin: 0; padding: 0; }

You can also apply it to the p element like this, but it is bad practice as you have to separate content and presentation. Do this now, it will make your life easier when you need to change something.

<p style="margin:0; padding: 0;">This is bad</p>

Answer 3

The space will be due to margins and padding applied to the p tag. Add the following to a <style> tag in the header, or an external stylesheet.

p {margin: 0;padding: 0}

Answer 4

If you put p { margin: 0; padding: 0; } in your CSS file it will affect all your paragraphs from all the pages the have that external stylesheet.

And if you use: <p style="margin:0; padding: 0;">, I will have to agree with Allan that is not a got practice to have inline CSS.

Another solution would be to use <span> instead of <p> like this:

<div style="background-color:#ff0000; width:95%;"><span>note line 1</span><br/><span> note line 2</span></div>

Hope this helps! :)