Minimum height for div or span with empty element
Solution 1
Your span
element needs to become a block element if you want to set its height. So set the style display: block
or display: inline-block
as appropriate.
span.item {
display: inline-block;
}
To set the height of an empty span, I've found it best to simply inject a
rather than set a min-height. (UPDATE: per @sawa, rather than using a non-breaking space character, perhaps a more suitable character would take up no space, i.e. the unicode ZERO WIDTH SPACE character, \200b
.)
span.item:empty::before {
content: "\200b"; /* unicode zero width space character */
}
This will work for whatever the font size may be, and it avoids problems with the baseline not lining up with adjacent text. Look at the line that says "Huh?" below:
http://plnkr.co/edit/GGd7mz?p=preview
(See similar question: https://stackoverflow.com/a/29354766/516910)
Solution 2
Your code isn't right: you don’t need enclosing quotes ("") around values in CSS.
Either use:
min-height: 1em; /* I am not sure if one can use em with height properties */
Or use:
min-height: 12px;
Related videos on Youtube
sawa
I have published the following two Ruby gems: dom: You can describe HTML/XML DOM structures in Ruby language seamlessly with other parts of Ruby code. Node embedding is described as method chaining, which avoids unnecessary nesting, and confirms to the Rubyistic coding style. manager: Manager generates a user's manual and a developer's chart simultaneously from a single spec file that contains both kinds of information. More precisely, it is a document generator, source code annotation extracter, source code analyzer, class diagram generator, unit test framework, benchmark measurer for alternative implementations of a feature, all in one. Comments and contributions are welcome. I am preparing a web service that is coming out soon.
Updated on June 04, 2022Comments
-
sawa almost 2 years
When I enclose within
span
ordiv
a string that happens to be an empty string or includes only white spaces, that part does not have any height, and when thatspan
ordiv
is further embedded into something like atable
, that cell does not have enough height, and looks wrong. How can I ensure that aspan
ordiv
takes up at least the height of when the string has other characters? This is something like doing\strut
in TeX. I can either insert something into the string, or adjust the css.I tried, putting the following into the relavant css class, but the problem is that I have to manually adjust the string height (I am not sure if it is "1em". Probably not). What is the right way to do this?
min-height : 1em;
-
wwwroth over 12 yearsIf it's a SPAN, you're going to need to add "display:block;" to it to accept height values. By default, it's displayed inline. I would also recommend if this is inside a table to assign the min-height to the <tr> tag specifically and make the entire row the same height.
-
-
sawa over 12 yearsThat was just my typo. Actually, It worked without the quotations, and
em
is available. I checked it with different values ofem
, and it worked. The problem is that I need to adjust it manually. -
Pankaj Upadhyay over 12 yearsYou can set the min property for table colums. Otherwise you have to manage it manually. Besides, it good behavior not to do anything on its own. You might have strange results otherwise :-)
-
sawa over 12 yearsThanks. I would like to accept the comment part of your answer.
-
sawa about 9 years
"\00a0"
(
) takes up horizontal space. I think"\200b"
(​
) is better -
broc.seib about 9 years@sawa Agreed,
"\200b"
give the presence of text while being completely invisible. -
Prasad Silva about 8 yearsOctal escape sequences are deprecated. Use
\u200b
instead. -
broc.seib about 8 years@PrasadSilva Hmmm... what's your source saying this is deprecated? The current CSS spec doesn't say anything about a leading "backslash u". That would just give you a literal "u". The spec says "backslash followed by 1-6 hex digits". See this railroad diagram: w3.org/TR/css-syntax-3/#string-token-diagram and w3.org/TR/css-syntax-3/#escape-diagram
-
Prasad Silva about 8 yearsYea, my mistake. I was looking at this post trying to fix a strict mode error I got in JS while using the zero width space character. ES5 forbids octal syntax in strict mode: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…