In the layout there is often a situation when, for example, you need to indent from the container to the text. If to the right and to the left it is quite simple to do this, then vertically it is more difficult to get into a pixel. That is, we take a ruler and look at the layout what is the distance from the border of the container to the capital letter of the text. But, if you set the internal indent in the container, it will be added to the line spacing of the text.

It is clearer to ask by example. I want my visual indent from the container to the text to be of a certain size from above and below and I do not want to depend on the font size.

* { padding: 0; margin: 0; } .container { padding: 20px; /* Нужен такой отступ до текста! */ /* Для наглядности */ color: white; background: black; width: 300px; font-size: 20px; /* Равен размеру шрифта, но отступ до следующей строки есть сверху и снизу. Можно ли как-то сделать только снизу? */ line-height: 20px; } /* Наглядно смотрим интервал */ .container span { background: gray; } 
 <div class="container"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis atque maiores porro totam ipsum voluptatum cum similique, quam esse id eaque perspiciatis distinctio ex provident natus culpa maxime voluptate, dolorem.</span> </div>

How to achieve this?

    2 answers 2

    There is no common solution for all fonts, because the amount by which the line-height greater than the height of the letter x individual for each font. But you can play around and find the right value for the margin-top , which will be in units of ex - this is the height of the letter x font used. I also want to draw your attention to the fact that the line-height does not need to be set in pixels, so you have to constantly monitor its inheritance, and this is an extra hemorrhoid.

    In the example below, you can freely increase or decrease the size, but the letter will always be on the red border. The .container__inner wrapper .container__inner added for illustrative .container__inner only.

     * { padding: 0; margin: 0; } .container { padding: 20px; color: white; background: black; width: 300px; font-size: 20px; line-height: 1; } .container span { background: rgba(255,255,255,.2); display: inline-block; vertical-align: top; margin-top: -.4ex; } .container__inner { border: 1px solid red; } 
     <div class="container"> <div class="container__inner"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis atque maiores porro totam ipsum voluptatum cum similique, quam esse id eaque perspiciatis distinctio ex provident natus culpa maxime voluptate, dolorem.</span> </div> </div>

      Use padding-bottom in a container. This is indented from below. To indent only at the top, use padding-top . Well, by analogy padding-left and padding-right . You do not depend on the size of the font. The indentation will always be as many pixels as you specify. Indents can be combined.

       *{ padding: 0; margin: 0; } .container{ padding-bottom: 80px; color: white; background: black; width: 300px; font-size: 15px; } 
       <div class="container"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis atque maiores porro totam ipsum voluptatum cum similique, quam esse id eaque perspiciatis distinctio ex provident natus culpa maxime voluptate, dolorem.</span> </div>

      • I am not talking about that. Look, imagine that you are laying out a layout, you have text in a frame, you take a ruler and look at the layout how many pixels from frame to letter and set this distance as a padding-top container (for example, 20px), but then the problem arises: from the letter to the padding, there will also be indentation, respectively, you will no longer be so easy to get into the pixel. - Yes Man