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

Question

It started with one question like this: HTML <p> and <span> questions .

And it ended with 3 ... I want to understand why the following happens. Starting with this example:

A <p> element without any special CSS rule on it has no text when the page is loaded, therefore height:0 . Due to javascript operations on the page, it starts to have characters, so set the default font-size to allow us to see the text.

• How can I assure that this <p> always has the same height (with or without text inside)?

• Why using em in width affects <p> and not <span> as follows:

 p,span {width: 1em} 

 <p>this is a paragraph</p> <span>this a span</span> 

3. Although I understand that in W3C, the span element is a common wrapper for phrasing content that does not represent anything by itself. my intention is to make him represent something ... And since this use inside paragraphs is so common, why can't CSS affect its height / width in the same way that it affects <p> ?

I answer the first question with what I understand, but I do not mark it as accepted. I am looking for an answer based on reasons that justify the use of a particular solution.

I will only edit my question / answer if something is wrong, or specific proposals are made for this.

Answer 1

Question 2

The behavior of width p compared to span is explained by the CSS specification for the width property.

width not applied to span elements; therefore, p is a block-level element and takes the width value.

Note that if you apply display: inline-block to a span , then the width is recognized because the inline block is not an integral inline element.

Link: http://www.w3.org/TR/CSS21/visudet.html#the-width-property

Question 3

HTML provides two generic vanilla-flavored elements, a div , which is a block-level element, and a span , which is an inline element. span can be used in any element, be it p , li , td , i and so on. If you want the span nested in p to have a specific style, you can define a specific CSS rule to include the style you need. If you want p as a behavior with respect to width, indentation and margins, then you can specify display: inline-block . The HTML specification does not indicate a common element of an inline block, probably because no member of the specification group saw the need.

Keep in mind that the default style of HTML elements depends on the browser, so theoretically the default stylesheet for the browser may have a rule for p span , but as far as I know, such an implementation does not exist.

Question 1

To prevent the empty p tag from being reset to zero height, I would use the :after pseudo-element to insert non-breaking space (   has the hex code 0xa0 ).

Please note that since the span is an inline element, its height does not collapse to zero, because the height of the inline, not replaced element is determined by the line-height ( height ignored), so you do not need to add non-breaking space IF you want empty space had a non-zero width.

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

 <h4>Empty p</h4> <p></p> <p>p tag with text.</p> <h4>Empty span</h4> <span></span> <span>span tag with text.</span> 

Answer 2

The following solutions provide a default height for a <p> without text and an attempt to simulate empty content in a <span> :

A

Using CSS according to w3schools :

  p,span {height: 1em} 

Sets the height:

Regarding the font size of the element (2em means 2 times the size of the current font).

 p, span {height: 1em} 

 <p></p> <p>Above there a ghost paragraph</p> <span></span> <span>To the left there NO visible trace of a span</span> 

IN

Using only HTML, putting a space (   ) inside the <p> (so that it actually has a character):

 <p>&nbsp;</p> <p>Above there a ghost paragraph with a space</p> <span>&nbsp;</span> <span>To the left there a span with a space</span>