Aligning images vertically without white space

  • yo go re

    (@yo-go-re)


    7 years, 7 months ago

    I’ve got six images I want to have touching each other – two rows of three. In normal HTML this would be as easy as using a <br> tag, but WordPress’s weird insistence on putting a margin under the images is making it difficult. Right now, I’ve got two rows, but there’s a gap between them. How do I get rid of that? I’ve tried doing it as a table (no luck) tried setting the images’ style to display:block (but then I can only have one per line), tried setting the style to display:inline-block (the white gap remains), so what’s the solution?

    It seems ridiculous to create a new CSS style just for one specific case; there must be some way of doing it on the page itself…

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Joy

    (@joyously)

    7 years, 7 months ago

    It’s not WordPress. It’s your theme. And you need to consider how it should look on a phone or on a 25 inch monitor.
    What you can do is go into Text mode and put inline styles on the img tags like style="margin:0"

    Thread Starter yo go re

    (@yo-go-re)

    7 years, 7 months ago

    Yep, glad you knew what I meant – my theme, not the program itself.

    And thanks for the suggestion, but no, that doesn’t fix it at all. I tried your tip (as well as margin:0px and margin:none just in case), but the gap remains…

    Joy

    (@joyously)

    7 years, 7 months ago

    If you left your other attempts in there, you would still have gaps. I’m referring to you trying tables, block, and inline-block.
    By putting the style on the actual image, it will override whatever margins the theme used (unless the theme used !important, which it shouldn’t use).

    Thread Starter yo go re

    (@yo-go-re)

    7 years, 7 months ago

    Oh, I see what you’re saying. But no, no worries: I tried those things one at a time, and when they didn’t work, I took them back out and tried the next one. (I think assigning a style of block AND inline-block inside a table with no margins would be the equivalent of dividing by zero! Ha!)

    Joy

    (@joyously)

    7 years, 7 months ago

    I did look at your page and didn’t see any margins being used. I think the <br> was causing the gap because of its line-height, but when I removed it, there were 3, then a gap and then 1, then 2 more on the next line (no gap). I’m not sure what was causing the gap after that…

    Thread Starter yo go re

    (@yo-go-re)

    7 years, 7 months ago

    Huh, I’m not sure what would cause it, either. How very odd!

    Anyway, I think I’ve finally managed to solve it! In case anyone in the future is having a similar problem and is Googling around trying to find a solution, I had to make a table with each image in its own cell, make sure the <td> tags all had style=”border:none;padding:0px;” applied, and THEN use style=”display:block;” on all the images – that way, when the images acted as a block-level element, they were only doing so within the table cell, not within the entire page. Whew! A bit more complex than I expected it would be, but the important thing is that my six little thumbnails are now cozily touching each other so they look like one seamless image.

    Thanks for sticking with me and trying to help puzzle out the solution. I appreciate it…

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Aligning images vertically without white space’ is closed to new replies.