How to set an empty paragraph element to the minimum height of the font-size (text)

Question

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   to the element, but I want to set it purely by CSS

Will · Accepted Answer · 2022-05-31T12:22:23.943

1

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

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

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

edited May 31 '22 at 12:22

answered May 31 '22 at 12:17

Will

1,081
1
9
20

isn't it `p::after`? – clarkk May 31 '22 at 12:19
@clarkk fixed it. – Will May 31 '22 at 12:22
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

score 0 · Answer 2 · answered May 31 '22 at 12:34

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>

score -1 · Answer 3 · answered May 31 '22 at 12:19

-1

Try to use

p:empty {
    height: 14px;
}

answered May 31 '22 at 12:19

Amandeep Singh

317
4

2

OP asked about the height of the text, not how to set an absolute height to the element – Alon Eitan May 31 '22 at 12:27

How to set an empty paragraph element to the minimum height of the font-size (text)

3 Answers3