3

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>
Community
  • 1
  • 1
Victoria
  • 497
  • 2
  • 10
  • 20

2 Answers2

3

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>
Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Aha! Thanks. Both the explanation and the cure! Is there a way to obtain the baseline value using js or view it in a browser debugger? – Victoria Jan 20 '15 at 03:07
  • @Victoria In Chrome, I usually just look at the "Computed" style (this allows me to determine default values..). If you want to dynamically retrieve the value, try something like this http://jsfiddle.net/drj2vq5c/ – Josh Crozier Jan 20 '15 at 03:23
  • Interesting. That seems to be the baseline _adjustment_ rather than the baseline itself, though. vertical-align doesn't seem to show up when it is the default, but does when it is not. And while the computed styles show the line-height, they do not seem to show where within that line-height the baseline is, nor what the ascent or descent is. That information might have helped me figure out my issue? Although I had set line-height to 0... and the space seemed to be some invisible-to-Computed descender reservation... – Victoria Jan 20 '15 at 09:23
0

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;}
user3072210
  • 35
  • 1
  • 10