CODEWITHSUNDEEP
css
Victoria
Victoria

Reputation: 505

Line height is set to 0, why is there space between lines?

Short form question: Why is there vertical space between the bottom lines, and not the upper ones? I don't want the vertical space.

TL;DR

Same behavior in Firefox and Chrome, so not likely a bug, but clearly something I don't understand.

While I understand the font-size for .wrap3 is larger than the previous ones, the line-height is zero, and calculated that way according to the debugger. Also notice that although the text is 16pt, and its line-height calculates to 19.2pt, and that is very close to the font-size of wrap1. Further notice that .wrap2 uses a 40pt font... over twice as big, yet has no effect on the line spacing. But bigger than 40pt, and space appears. .wrap3 uses 60pt, which produces an obviously visible vertical space... but far less than 60pt.

I've read about struts here, another similar issue is here. And there is loads of info and several techniques for eliminating the space between inline and inline-block elements, and I've successfully used them in circumstances where that was appropriate.

Now, however, I'm facing the other case... where the space between inline elements is desired, to work in a fluid layout to provide space between elements. Although I have a <br> in the snippet, imagine far more than 4 items in the list, and varying sizes of browser windows or device screens.

What I'm trying to do, is to vary the space between inline elements, which is a quarter of the .wrapN font size, to my advantage. Spacing these items apart with padding or margin would not allow both the last item on one line to reach the very right edge of the window and also have the first item on the next line reach the very left edge of the window, although a solution using padding or margin or something else would be OK, as long as both sides of the window can be reached under appropriate circumstances.

body { margin: 0; padding: 0; }

.wrap1 { font-size: 20pt; line-height: 0; }
.wrap2 { font-size: 40pt; line-height: 0; }
.wrap3 { font-size: 60pt; line-height: 0; }
.foo2 { display: inline-block; line-height: 0; font-size: 0; }
.foo2 p {
}
.foo2 span {
  font-size: 16pt;
  line-height: 1.2;
  display: block;
  background: #ccc;
}
<div class="wrap1">
<div class="foo2"><p><span>text1</span></p></div>
<div class="foo2"><p><span>2text</span></p></div><br>
<div class="foo2"><p><span>3biggertext</span></p></div>
<div class="foo2"><p><span>4text</span></p></div>
</div>
<div class="wrap2">
<div class="foo2"><p><span>text1</span></p></div>
<div class="foo2"><p><span>2text</span></p></div><br>
<div class="foo2"><p><span>3biggertext</span></p></div>
<div class="foo2"><p><span>4text</span></p></div>
</div>
<div class="wrap3">
<div class="foo2"><p><span>text1</span></p></div>
<div class="foo2"><p><span>2text</span></p></div><br>
<div class="foo2"><p><span>3biggertext</span></p></div>
<div class="foo2"><p><span>4text</span></p></div>
</div>

Upvotes: 3

Views: 4098

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241188

If you want to remove the vertical space, change the vertical-align property to something other than the default value which is baseline (vertical-align: baseline).

.foo2 {
    vertical-align: top;
}

When the value is set to baseline this vertical space is reserved for letters such as j, y, p, q.

body {
  margin: 0;
  padding: 0;
}
.wrap1 {
  font-size: 20pt;
  line-height: 0;
}
.wrap2 {
  font-size: 40pt;
  line-height: 0;
}
.wrap3 {
  font-size: 60pt;
  line-height: 0;
}
.foo2 {
  display: inline-block;
  line-height: 0;
  font-size: 0;
  vertical-align: top;
}
.foo2 p {} .foo2 span {
  font-size: 16pt;
  line-height: 1.2;
  display: block;
  background: #ccc;
}
<div class="wrap1">
  <div class="foo2">
    <p><span>text1</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>2text</span>
    </p>
  </div>
  <br>
  <div class="foo2">
    <p><span>3biggertext</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>4text</span>
    </p>
  </div>
</div>
<div class="wrap2">
  <div class="foo2">
    <p><span>text1</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>2text</span>
    </p>
  </div>
  <br>
  <div class="foo2">
    <p><span>3biggertext</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>4text</span>
    </p>
  </div>
</div>
<div class="wrap3">
  <div class="foo2">
    <p><span>text1</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>2text</span>
    </p>
  </div>
  <br>
  <div class="foo2">
    <p><span>3biggertext</span>
    </p>
  </div>
  <div class="foo2">
    <p><span>4text</span>
    </p>
  </div>
</div>

Upvotes: 3

user3072210
user3072210

Reputation: 35

I dont know if this is quite the solution you are looking for but you could make each line a seperate wrap and then do something with padding-bottom like this

body { margin: 0; padding: 0; }

.wrap1 { font-size: 20pt; line-height: 0; padding-bottom: 10;}

Upvotes: 0

Related Questions