I always have had problems with the <p> tag in HTML.

Now, I was happy to find the solution to a problem I hit several times and finally solved with a big smile.

In most cases I use <div> (division) tags to create web pages. That's easy because those don't generally use any padding or margin. So you build all sorts of complex tree with that and the result is just perfect.

The problem with the websites I create now is that users can type in text themselves using an MS-Word like editor. In that editor paragraphs are automatically delimited using the <p> tag (and it would be strange to force the use of the <div> tag also that's doable...)

Thus, in many places, I end up with a paragraph even though the nice, intended formatting will break with them...

The solution? Simple! You need to kill the margin and padding of the <p> tag (you can keep some padding if you want/need, although you probably want to use a line-height of 150% or so...)

That's it. 8-)

The visual problem is often the background color appearing at the bottom of a <div> when you'd think that there is no way such a thing would happen. I think the margin is the main problem there. The margin is taken in account, overall, but not by the <div>. (you see through margin, so it is sensical.)

Sample code:

<div>
  <p>This is my text</p>
</div>

If the <div> has a margin/padding of 0 and the <p> tag has a padding/margin of say 10px, then the <p> tag will leak outside of the <div> tag. Note that is not obvious with just that code. You probably need a complete (tall) page to see the ill effect.

The picture on the right shows you the black edge of the DIV, the green edge of the P tag and the red edge of the P margin. The margin of the P tag can overflow the DIV tag area and generate the common problem I have with my websites. Note that one way to fix the problem is to add a padding large enough to the DIV tag. But that's not always easy to deal with that.