How do I not stretch a flexbox's or grid item's natural text-height (using background-color on the text)?

Question

I want to achieve the same text effect (little margins beneath the white boxes as shown in the blue box [1]) in the green box [2]. The green box [2] must use flexbox (or css-grid) for layout.

My question is: Is this possible without changing the HTML-Code (eg. by adding a <span>-element)?

/* ======================= 
   General Styles (not relevant) */

section {
  min-height: 15em;
  font-family: sans-serif;
  line-height: 1.4;
  padding: 1em;
  margin-bottom: 1em;
}

h2 {
  display: inline;
  background: white;
  font-size: 1em;
  margin-bottom: 0.5em;
}


/* ======================= */


/* Layout [ 1 ]: Just a little padding on the left */

section#one {
  padding-left: 50%;
  background: darkblue;
}


/* Layout [ 2 ]: Using flexbox */

section#two {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  background: seagreen;
}

section#two h2 {
  flex-basis: 50%;
}

<section id='one'>
  <h2>[ 1 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>
</section>

<section id='two'>
  <h2>[ 2 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>
</section>

Temani Afif · Accepted Answer · 2018-10-29T09:20:54.043

As explained in a previous question the flex item are automatically "blockified" and the effect you are looking for only apply to inline element.

In case you want to only have the vertical space between each line where there is no background, you can consider a gradient. The tricky part is to find the correct values in order to only cover the content area with the color of the gradient.

/* ======================= 
   General Styles (not relevant) */

section {
  min-height: 15em;
  font-family: sans-serif;
  line-height: 1.4;
  padding: 1em;
  margin-bottom: 1em;
}

h2 {
  display: inline;
  font-size: 1em;
  line-height:1.2em;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0,transparent 0.1em,
      white 0.1em,white 1.1em,
      transparent 1.1em,transparent 1.2em);
  margin-bottom: 0.5em;
}
#one h2 {
  background:#fff;
}

/* ======================= */


/* Layout [ 1 ]: Just a little padding on the left */

section#one {
  padding-left: 50%;
  background: darkblue;
}


/* Layout [ 2 ]: Using flexbox */

section#two {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  background: seagreen;
}

section#two h2 {
  flex-basis: 50%;
}

<section id='one'>
  <h2>[ 1 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>
</section>

<section id='two'>
  <h2>[ 2 ] Lorem ipsum dolor sit amet, consetetur sadipscing elitr ut labore et dolore magna aliquyam erat, sed diam voluptua. </h2>
</section>

Here is some useful questions that may help understand the calculation of the line-box/content area so that you can correctly find the numbers:

Why is there space between line boxes, not due to half leading?

Understanding CSS2.1 specification regarding height on inline-level boxes

Great explanation, thank you, Termani! It's now clear to me that 'blockification' is the actual issue here. Here is the link to the specs, where it literally says: 'The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.' https://www.w3.org/TR/css-flexbox-1/#flex-items — johnrbnz, Oct 29 '18 at 09:25

How do I not stretch a flexbox's or grid item's natural text-height (using background-color on the text)?

1 Answers1