javascript - How to provide default font height or content when <p> or <span> has no characters? -

this started 1 question similar 1 in here: html <p> , <span> questions .

and ended 3... want understand why following happen. starting example:

a <p> element without special css rule on has no text when page loaded, therefore height:0. due javascript operations in page, starts having characters, height set default font-size, allow see text.

1. how can assure <p> has same height (with or without text inside it)?

2. why using em in width affects <p> , not <span> this:

p,span {width: 1em}

<p>this paragraph</p>  <span>this span</span>

3. although understand in w3c "span element generic wrapper phrasing content not represent anything., intention make represent something... , since it's usage inside paragraphs often, why css cannot affect height/width in same way <p> affected?

i answering first question figured out, not marking accepted - looking answer coming reasons justify usage of particular solution.

i edit question/answer if wrong or specific suggestions made in order so.

question 2

the width behavior of p versus span due css specification width property.

width not apply non-replaced inline elements (span), p being block level elements, takes on width value.

note that, if apply display: inline-block span, width recognized since inline-block not non-replaced inline element.

reference: http://www.w3.org/tr/css21/visudet.html#the-width-property

question 3

html provides 2 generic, vanilla-flavored elements, div block-level element, , span inline element. span can used within element, p, li, td, i , on. if want span nested in p have particular styling, can define specific css rule enable styling need. if want p behavior respect width, padding, , margins, can specify display: inline-block. html specification not specify generic inline-block element, because no member of specification group saw need it.

keep in mind default styling of html elements browser dependent, in theory, browser's default style sheet have rule p span, far know, such implementation not exist.

question 1

to prevent empty p tag collapsing 0 height, use :after pseudo-element insert non-breaking space (  has hex code 0xa0).

note since span inline element, height not collapse 0 because height of inline, non-replaced element determined line-height property (height ignored), don't need add non-breaking space unless want empty space have non-zero width.

p, span {    border: 1px dotted blue;  }  p:after, span:after {    content: '\a0';  }

<h4>empty p</h4>  <p></p>  <p>p tag text.</p>    <h4>empty span</h4>  <span></span>  <span>span tag text.</span>