Search code examples
cssflexboxcss-grid

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

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.

desired text effect

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>

Solution

  • 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