What to do with indents around text?

Question

css

Layout question: there is some layout (this one was taken from the first site that came across, but it is relevant for everyone with printed text), it has a header with text on the right side. According to the layout, the indent from the top edge of the header to the phone number should be 45px , the width and height of the block with numbers and the inscription "feedback" should be 256px and 81px, respectively, based on the layout.



Implementation of a specific block with a phone and the inscription "feedback":

<header>
      <div class="container">
        <div class="contacts">
          <span class="contacts__phone">[phone]</span>
          <span class="contacts__phone">[phone]</span>
          <span class="contacts__feedback">Обратная связь</span>
        </div>
      </div>
    </header>

CSS styles (for text pulled from Zeplin, fonts connected via Google Fonts).

@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,[email protected],300;0,700;1,300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,[email protected],400;0,700;1,400;1,700&display=swap');

    .container {
      max-width: 980px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
    }

    header {
      padding: 45px 0 65px;
      background-color: #ddd;
    }

    .contacts {
      display: flex;
      flex-direction: column;
      text-align: left;
    }

    .contacts__phone {
      font-family: 'Open Sans Condensed';
      font-size: 40px;
      font-weight: 300;
      font-stretch: condensed;
      line-height: 1.15;
      letter-spacing: 1px;
      color: #767676;
    }

    .contacts__feedback {
      font-family: PTSans;
      font-size: 24px;
      font-weight: 900;
      line-height: 1.92;
      letter-spacing: 0.6px;
      color: #767676;
    }

Result (without underlining "Feedback"):



What I get in practice:

The width of the block is slightly larger than required - 258.7px instead of the proper 256px. As well as the height of the block, which turned out to be 119px instead of 81px. The reason for this, as you can see in the figure below, is the indentation around the text, which gives a small increase on the sides and a significant increase in the vertical.
The gap between the last phone number and the "Feedback" label should be 10px, there is already some gap due to the set line-height . From here, the layout is wrong: since the indent from the top of the header to the phone number should be 45px, I gave the header a top padding of these 45px, but the line-heightadds extra pixels.



Actually, what are the questions:

1. What to do in such situations, how to remove unnecessary indents to get "pixel for pixel" (or at least very close to it)?
2. Where else can similar problems occur? (I know, for example, that a space appears between inline-block elements in a row. Or, for example, an image that gives a small indent
down ) positioning, transform: translate ? 4. How do real customers relate to such moments?

I just recently started studying web development, so I have little idea how all this happens on real projects.

5. Is there an adequate and convenient ruler for measurements directly in the browser?

Thanks in advance to everyone for the replies!

Answer 1

A quick digression - typography on the web = pain. Enjoy. Nothing to do with printing, although I would like to.
Now in essence:
1. Edit special cases by hand. There are just a sea of ​​​​opportunities here, from line-height: 1 (norms) to absolute positioning (bad).
2. Constantly and everywhere, so it is worth understanding the anatomy of fonts in order to know how to work with them. Well, yes, no Zeplin will give you this magic, since this is a program that simply transposes editor properties (read everything is absolutely positioned) into CSS types.
3. Yes, the main thing is not to shoot yourself in the foot while doing this. Those. most likely it is not worth it to resort to this.
4. It is important for the customer to make money on the project that you are implementing.
5. Yes, there is, such as Baseliner, or all sorts of plugins for applying a translucent picchi over the layout, but in general this is all from the evil one.

Answer 2

Try the line-height property