3

Suppose one is designing a box to frame some content, and wants that box to always have consistent space between its borders and text inside of it, regardless of the text's line-height. Is there a solution aside from custom negative margin on each box?

In theory this should actually be the "responsibility" of the content (in this case, the text), assuming our box is some kind of component allowing transclusion (e.g. web component slots), so I'd be especially interested in any way to style an inline element so that its line-height-generated top and bottom spaces collapse, regardless of line-height value (intentionally not calling them margins to not confuse them with the margin css property).

Here as an runnable example of the issue - the space between the magenta border and the inner text varies due to line height, and if the magenta border wasn't there, it would appear that each box has different padding.

This has probably been answered, but unfortunately since the terms are so generic it's hard to research (though I did try).

.foo {
  max-width: 200px;
  border: 2px solid blue;
  padding: 20px;
  line-height: 2;
  display: inline-block;
  vertical-align: top;
}

.foo>* {
  border: 1px solid magenta;
}

.baz {
  line-height: 1;
}

.bar {
  line-height: 3;
}
<div class="foo">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</div>
</div>
<div class="foo">
  <div class="baz">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</div>
</div>
<div class="foo">
  <div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</div>
</div>
AlexMA
  • 9,842
  • 7
  • 42
  • 64
  • 1
    This is a problem I've contended with for years and never yet found an elegant solution to. (Some cursory research right now reveals [this SCSS mixin](https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f) which is anything **but** elegant, not to mention *it's an SCSS mixin*.) – BoltClock Mar 28 '19 at 18:37
  • @BoltClock Nice, well at glance that is definitely a bit better than bespoke negative margins. Thanks for sharing it. – AlexMA Mar 28 '19 at 19:03

1 Answers1

1

One idea that may solve half the issue is to change the line-height of the text to a smaller value than the container. Doing so, the height of the text will be smaller than the linebox and you can align it to the top. For this you need to consider an extra container.

.foo {
  max-width: 200px;
  border: 2px solid blue;
  padding: 20px;
  line-height: 2;
  display: inline-block;
  vertical-align: top;
}

.foo>* {
  border: 1px solid magenta;
}

.baz {
  line-height: 1;
}

.bar {
  line-height: 3;
}

span {
  line-height:1;
  vertical-align:top;
}
<div class="foo">
  <div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</span></div>
</div>
<div class="foo">
  <div class="baz"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</span></div>
</div>
<div class="foo">
  <div class="bar"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci impedit porro fuga ab magnam.</span></div>
</div>

As you can see the text will always be aligned on the top whataver the line-height but the issue remains on the bottom. It's like we moved the issue to only one side.

Here is a related answer to better understand the alignment trick : https://stackoverflow.com/a/54190413/8620333

Temani Afif
  • 245,468
  • 26
  • 309
  • 415