css format blank string the same as actual text

Question

I keep running into this problem - I have html like this:

 <div class="line">
    <div class="word">hello</div>
    <div class="word">there</div>
    <div class="word"></div>
  </div>

and this css:

.line
{
  background-color:red;
  padding:10px;
}

.word
{
  display:inline-block;
  width:200px;
  height:40px;
  padding:10px;
  background-color:white;
}

And I get this:

Why is it happening, and how do I fix it so that an empty string is formatted exactly the same as a string with values?

Lars · Accepted Answer · 2022-02-07T22:06:22.250

Vertical align

You could apply vertical-align:top to .word

.line {
  background-color: red;
  padding: 10px;
}

.word {
  display: inline-block;
  width: 100px;
  height: 40px;
  padding: 10px;
  background-color: white;
  vertical-align: top;
}

<div class="line">
  <div class="word">hello</div>
  <div class="word">there</div>
  <div class="word"> </div>
  <div class="word"></div>
</div>

Empty selector

Or add a rule for empty .word divs, but this would still be malformed for divs with spaces in them. Could be helpful if you can't change the vertical-align

.line {
  background-color: red;
  padding: 10px;
}

.word {
  display: inline-block;
  width: 100px;
  height: 40px;
  padding: 10px;
  background-color: white;
}

 .word:empty:before {
    content: "\0020";
    display: inline-block;
  }

<div class="line">
  <div class="word">hello</div>
  <div class="word">there</div>
  <div class="word"> </div>
  <div class="word"></div>
</div>

Why is this happening

Vertical alignment determines how 'inline' elements are positioned in relation to each other. by default it's set to baseline

Baseline will try to put 'most' of the text above the baseline and some of the dangling bits like the g p and q and y under the baseline.

That would make sense for text, the browser will attempt to do that for all text. Even text that's wrapped in divs and styled with paddings.

The entire empty div is put on the baseline.
Browser manufacturers just agreed that this is how it should be done.

If you look at it as if it where a text editor, It would make sense for small inline images, the default would be to push the entire line down based on the dimension of the image

It been like this since before i was born, It has to do with how the browser will calculate the required size and wrap/breakpoints. [this site](https://stackify.dev/949060-why-an-empty-button-does-not-align-vertically-with-one-that-has-text-inside) goes into more detail. >>"the browser vertically aligns the element to the baseline such that the half the height is above the baseline and half below. " — Lars, Feb 07 '22 at 21:43
I've padded the answer with an explanation, hope it clears things up. Cheers. — Lars, Feb 07 '22 at 22:07

score 1 · Answer 2 · answered Feb 07 '22 at 21:34

Equal height <div> elements can be achieved when applying the .line class style display: flex.

.line {
  background-color:red;
  padding:10px;
  display: flex;
}

.word {
  border: 1px solid red;
  margin-left: 5px;
  margin-right: 5px; 
  width: 200px;
  height: 40px;
  padding: 10px;
  background-color: white;
}

<div class="line">
  <div class="word">hello</div>
  <div class="word">there</div>
  <div class="word"></div>
</div>

ahh yes - I should use flex more - thx – Darren Oakey Feb 07 '22 at 23:58 — Darren Oakey, Feb 07 '22 at 23:58

css format blank string the same as actual text

2 Answers2

Vertical align

Empty selector

Why is this happening