Hey. Already day I mess around with finding the answer to the question, but almost without success. Decided to knock here.
The site https://www.dropbox.com/business in the right part of section number three (with a computer image) is an element of the link with the arrow inside. I can not understand, with the result that the block size is not limited by the size of the image, but has a strange indentation 8 pixels down. From my own reasoning and sampling I came to the conclusion that the reason for all parameters was:
line-height: 26px, font-size: 14px
But this is not the end. After trying to add the same arrow on my page, I noticed that the same parameters do not affect the size of my block version. For every fireman throw off and your class.

 .carousel-arrow { display: inline-block; position: relative; transition: right 250ms ease 0s; right: 40px; bottom: 0px; font-size: 14px; line-height: 26px; text-decoration: none; } .carousel-arrow img { position: relative; display: block; line-height: 26px; font-size: 14px; }

    1 answer 1

    The img element has a default display: inline-block behavior. Therefore, it is affected by the parent line-height . In your example, img set to display: block , so the line-height has no effect on it.

    • Thank you very much! I did not know. You helped me a lot. And as I did not notice something. - Philip Lisitsyn