0

Most HTML-elements do not have any special properties. Given the correct CSS, they can be made to look like each other.

div, p, b, span
{
  display:inline-block;
  border:2px solid black;
  padding:1px;
  margin:1px;
  position:relative;
  font-weight:normal;
}
<p>bluut<p>x</p></p>
<hr/>
<div>bluut<div>x</div></div>
<hr/>
<b>bluut<b>x</b></b>
<hr/>
<span>bluut<span>x</span></span>

However, in the above example, the 'p'-element renders differently from the div, span and b.

Regardless of wether you SHOULD, is it POSSIBLE to use css to look the P like the other elements?

realbart
  • 3,497
  • 1
  • 25
  • 37
  • This could be due to the fact that your HTML is invalid. Nested paragraphs aren't allowed. – j08691 Jan 11 '16 at 16:54
  • @FabrizioCalderan: if you run the snippet I provided, you'll see I set the padding and margin explicitly to 1px, and that the problem isn't the margins, but that browsers prevent nesting of p's. – realbart Jan 11 '16 at 16:54
  • @FabrizioCalderan You're missing that (1.) there's explicit margin and padding here, and (2.) it's because the `p`'s are nested and can't be, so the first is implicitly closed. – Two-Bit Alchemist Jan 11 '16 at 16:54

1 Answers1

2

You cannot nest <p> elements, as they cannot include block level elements (which <p> is). See the HTML spec:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

What you're seeing is the browser attempting to resolve this illegal HTML, by closing the initial <p> when it encounters a nested <p>, leading to some...strange effects (probably depending on browser.)

Serlite
  • 12,130
  • 5
  • 38
  • 49
  • DIV is a block level element to. However, that element responds to the css "display:inline-block". P does not. Why is this? – realbart Jan 11 '16 at 16:57
  • @realbart it does not say that block elements cannot be nested. It says that specifically `p` elements cannot contain block elements. – Gabriele Petrioli Jan 11 '16 at 16:57
  • I cannot accept an answer in 5 minutes :-) I read the specs, but I incorrectly any differences between "div" and "p" could be resolved through css, because that would be easiest to implement. But even though elements like STRONG, U, B are basically the same thing, P and H1 are of a different family. Thanks. – realbart Jan 11 '16 at 17:02
  • @realbart Sure, glad I could help out in resolving the confusion! – Serlite Jan 11 '16 at 17:05