This started with one question similar to this one in here: HTML <p> and <span> questions .
And ended with 3... I want to understand why the following happen. Starting with this example:
A
<p>
element without any special CSS rule on it has no text when the page is loaded, thereforeheight:0
. Due to javascript operations in the page, it starts having characters, thus the height is set to the defaultfont-size
, which allow us to see the text.
How can I assure that this
<p>
has always the same height (with or without text inside it)?Why does using
em
in width affects a<p>
and not a<span>
like this:
p,span {width: 1em}
<p>this is a paragraph</p>
<span>this a span</span>
- Although I understand that in W3C a "
span
element is a generic wrapper for phrasing content that by itself does not represent anything., my intention is to make it represent something... And since it's usage inside paragraphs is so often, why CSS cannot affect its height/width in the same way a<p>
is affected?
I am answering to the first question with what I figured out, but I am not marking it as accepted - I am looking for an answer coming up with reasons that justify the usage of a particular solution.
I will only edit my question/answer if something is wrong or specific suggestions are made in order to do so.