3

How to set an empty paragraph element <p> to the height of the font size?

If a paragraph element is empty it has no height. How to set the minimum height to the text height (font-size)?

I know you can add &nbsp; to the element, but I want to set it purely by CSS

clarkk
  • 27,151
  • 72
  • 200
  • 340

3 Answers3

1

You can use a whitespace in a pseudo-element. This should work:

p::after {
  content: '\00a0 '
}

Live demo here: https://jsfiddle.net/o96swntm/

Will
  • 1,123
  • 1
  • 9
  • 22
  • isn't it `p::after`? – clarkk May 31 '22 at 12:19
  • ok, but what does `\00a0 ` actually do? I guess `\0` is to write hex decimals.. but there is a space in the end? – clarkk May 31 '22 at 12:24
  • @clarkk It's unicode of a non breaking space – Will May 31 '22 at 12:27
  • you don't need to add the space in the end.. – clarkk May 31 '22 at 12:29
  • https://stackoverflow.com/questions/5467605/add-a-space-after-an-element-using-after – clarkk May 31 '22 at 12:29
  • @clarkk so I looked into the double colons because I realized that I always use single and never had any issue with it. So you can use both, but you need double for IE8 (and prior IE versions). See article and its comment section: https://css-tricks.com/to-double-colon-or-not-do-double-colon/ – Will May 31 '22 at 15:58
0

You can assign the regular p min-height in a css var.

:root {
  --p-height: 20px;
}

p {  
  color: white;
  background: green;
  min-height:var(--p-height);
}
<p></p>
<p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
-1

Try to use

p:empty {
    height: 14px;
}
Amandeep Singh
  • 708
  • 3
  • 8