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
You can use a whitespace in a pseudo-element. This should work:
p::after {
content: '\00a0 '
}
Live demo here: https://jsfiddle.net/o96swntm/
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>