How does the line-height works on images

HTML & CSS
1

45
451366Ă—768 121 KB

2

What is it you want to accomplish?

3

I know how it works on text as it adds 10px top and bottom if line-height is 20px …But I don’t know how it works on images when I kept image in a container and add line-height to a container.

4

Why would you want to do that? If you want more spacing, use margins or padding on your container.

5

I want to know how line-height works on that

6

Do you want space between the images? Try to be a bit more clear what you want. Maybe post the html and css you have so far

7

When the line-height property is applied to replaced inline elements (such as images, buttons, input fields, textareas, and select objects), it should have no effect according to the CSS specification. Some browsers, nonetheless, do allow it to have an effect on these kinds of elements.

https://tympanus.net/codrops/css_reference/line-height/

You can’t apply line-height to a container; that makes no sense.

8
9

Ok so what is it where you are after. Something you showed in the OP, but without space? Please show us what you have so far. Then it’s way easier to help

10

Hi penubothuvenkannacho,

Eric Meyer has a good explanation of how the inline format works:
https://meyerweb.com/eric/css/inline-format.html

Inline example:
https://meyerweb.com/eric/css/inline-test-1.html

Also mind the value of vertical-align will influence the vertical position of boxes.

Welcome to the forum, I should add. :slight_smile:

2 Likes
11

When I try to add line-height on div container that holds text the line-height shares the line-height equally but when I tried to add line-height in a container with image it adds line-height only to the bottom.

12

Try experimenting with different vertical-align values, to see what happens. :slight_smile:

Edit)
The site you linked to had all its examples vertical-aligned at the default base-line. :wink:

2 Likes
13

I find it very hard to understand where @penubothuvenkannacho is after. On the kirupa example they use line-height to remove space between images.

14

Images are stacked on the baseline because they are inline elements by default. Its the same as text being stacked on the baseline which leaves room underneath for text descenders.

As mentioned above try changing the vertical-alignment to top or bottom to see the difference.

I usually set all images to display:block in my reset stylesheet to avoid this problem altogether. I find I want my images as display:block most of the time so its easier to set up special cases if I want them inline on the baseline like text.

1 Like
15

They could have used vertical-align anything but the default, if they thought of it. :slight_smile:

2 Likes
16

I’ve assumed its the vertical space that is shown when images are stacked on the baseline.:slight_smile:

1 Like
17

Ha ok. Now I see. :slight_smile: Bye the way, they end the article by stating that it would be better to use floats on the images instead of using the line-height on the parent

1 Like
18

https://www.brunildo.org/test/IElineheight7.html
Refer this

19

horizontal space: think of IMGs like regular texts, or better yet inline-block elements.

<span>there space</span> <span>between us </span>
<span>NO space</span><span>between us </span>

is similar to

<img src="#"/> <img src="#"/>
<img src="#"/><img src="#"/>

Floating the elements allow them to still display side-by-side but changes their context (they are no longer in-line) so the " " in the source code is not displayed. The key here is that you have to think of the " "(space) in the source code as also rendering.

Vertical space:
again it’s a matter of context, which will determine what you can do to get rid of the space.
if you dont mind the images stacking , you could use display:block;
or you could use a combination of float/clear;
(in either case the images would now be int he block element context)
but you could simply do a vertical-align:top; and that should get rid of the space as well, without changing the context of the IMG tag

You could fudge around with line height BUT:

  1. rendering varies between browsers, so chances are that a value that solvves the issue for chrome wont solve it for Firefox, etc
  2. it will likely be an arbitrary value, that just so happens to work for that image ( a specific “magic” number) and that will make future maintainance hell
  3. it will may also be affected by parent/sibling font sizes.

in short , not the best way to solve the issue.

hope that helps.

6 Likes
20

That article is about problems with line-height in Internet Explorer 7, which was last updated in 2006. It is not relevant in 2018.

4 Likes