1

See this demo and the code pasted below.

enter image description here

See how there is red padding above and below the text?

<div class="row">
  <div class="col-md-6 text-right">
    <img src="https://images.unsplash.com/photo-1565893542669-5c3a75107dc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="couple" class="img-responsive" style="max-width: 400px;">
  </div>
  <div class="col-md-6 text-left">
    <h2 style="background: red; padding: 0; background: red; padding-top: 0; margin-top: 0;">
      TEXT
    </h2>
  </div>
</div>

I'm using Bootstrap but am not sure that it's related to the cause.

The answers at How can I remove space (margin) above HTML header? neither explained nor solved my problem here. For example, the main answers suggest setting margin to 0, which I've already done.

Ryan
  • 22,332
  • 31
  • 176
  • 357
  • 2
    it's `line-height` – Temani Afif Aug 15 '19 at 23:24
  • @TemaniAfif see my response about line-height hack: https://stackoverflow.com/questions/57517282/what-part-of-css-causes-this-unwanted-padding-in-text#comment101502608_57517334 – Ryan Aug 15 '19 at 23:44
  • 2
    you asked what the cause and it's line-height and it's not a hack. Now if you want to reduce it, it's a different story. You should not because this space is reserved for character like `ÂËjpq` – Temani Afif Aug 15 '19 at 23:48
  • @ObsidianAge I explained why my question is not a duplicate of that linked question. For example, the main answers suggest setting margin to 0, which I've already done. – Ryan Aug 15 '19 at 23:51
  • @TemaniAfif Showing me those `ÂË` characters was helpful. Aamir's answer mentions `line-height: 0.8em` but has no explanation about that value and feels random. Is there some universally-known (and true for all font-families) `line-height` setting that sacrifices the tops of special characters like `Â` and `Ë` (are those always called "accents"?) so that more common characters like `A` and `E` are perfectly aligned at the top? Thanks for your help. – Ryan Aug 15 '19 at 23:57
  • 2
    no there is not because each font has a unique design. The same line-height for different font can produce different result and alignment that's why the default value set by the browser is `1.2` which a good value to have all the character visible and to have a good space between lines. I answered a similar question here if you want more details: https://stackoverflow.com/a/55978512/8620333 – Temani Afif Aug 16 '19 at 00:01
  • @TemaniAfif Thanks, +1 for that answer. And I just found https://stackoverflow.com/a/14061972/470749 too. – Ryan Aug 16 '19 at 00:02

1 Answers1

1

style="line-height: 0.8em;" would reduce the space above and below the text. This space is set as a default of the text itself (nothing to do with Bootstrap). It's to make sure text is readable.

Ryan
  • 22,332
  • 31
  • 176
  • 357
Aamir
  • 53
  • 1
  • 8
  • That feels like a hack. For example, consider if "TEXT" were replaced with a longer headline, and then consider viewing it on a narrow device where the headline wrapped to a second line. Your hack would remove the unwanted spacing at the top but would affect how the rest of the text was displayed too. – Ryan Aug 15 '19 at 23:44
  • 1
    If you open a text editor or start typing in any text field, you will see that the cursor is as low as the bottom of a 'p' and as high as the top of an accented letter. This is just the default height of a line and is set as default by the browser/ application/ software/ texteditor. So any method you use to override this will be hacky. Sorry! – Aamir Aug 16 '19 at 00:05
  • Okay, thanks Aamir. – Ryan Aug 16 '19 at 01:20