How would I connect the 2 images to the middle image?

I don’t think so.

<img border="5" src="https://i.imgur.com/u3zWye4.png" style="height:60px;border-color: #38761d; ">
<img border="5" src="https://i.imgur.com/MAqbcs2.png" style="border-color:#38761d; margin-left: -9px; height:60px;">

You have added the border="5" to that code, not imgur.com.

 <a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" width="60" height="60" style="border: solid 5px #38761d;"></a>
    <a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="border: solid 5px #38761d; margin-left: -9px; "></a>

I saw it somewhere else then.

Maybe it’s not possible to do.

Maybe what’s not possible to do?

You were going to add @ronpat’s styles to your HTML, but you seem to have given up on that and gone on to something else, so if you want assistance, you need to tell us what it is you’re attempting to do,

We may be good, but we’re not mind-readers.

Were you able to do it? If you were I’ll give another go at it.

@asasass - I’m genuinely trying to help you here, but we will get nowhere if you don’t make more of an effort to explain what you want.

Was I able to do what?

What are you trying to do, and at what point have you got stuck?

preventing the boxes from breaking.

at this point:

 <a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" width="60" height="60" style="border: solid 5px #38761d;"></a>
    <a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="border: solid 5px #38761d; margin-left: -9px; "></a>

OK. I don’t see any attempt there to incorporate Ron’s styles into your code. I don’t even see the complete code; I thought you had three images? (And your original HTML didn’t include links, hence my assumption that you had moved on to something new.)

Use display: table/table-cell as @ronpat suggests.
You had the answer 5 hours ago.

1 Like

How are you able to use both, that’s what got me stuck?

This thread is hilarious.

Look, the easiest way to remove the gap between inline elements is to not have a line break or any space between them to begin with, in the source HTML.

In other words do this:

<img src=""><img src=""><img src="">

Instead of this:

<img src="">
<img src="">
<img src="">

To prevent the images from “wrapping” when the viewpoint shrinks, try playing with white-space:nowrap; on the parent. This will cause overflow though, if it works. So then your overflow settings will take effect.

If you still have gaps, look at font settings like line-height, font-size, and letter-spacing as well.

You apply them to different elements, as in Ron’s code. Go back and look at his code, then add the styles to the appropriate elements. display:table goes on the outer container and display:table-cell on the inner elements.

<div class="socialinks">
    <span><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></span>
    <span><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></span>
    <span><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></span>
</div>
.socialinks {
    display:table;
    border-spacing:5px;
    background-color:#000;
    outline:1px dashed red;
}
.socialinks span,
.socialinks a {
    display:table-cell;
}
.socialinks img {
    display:block;
    width:100%;
    height:auto;
}

display:table;display:table-cell

 <a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" width="60" height="60" style="border: solid 5px #38761d;"></a>
    <a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" style="border: solid 5px #38761d; margin-left: -9px; "></a>

@asasass, take a moment to think about it.

How does a table and table-cell work? A table has table cells, right? So you need a parent container to be defined as the table, and the inner elements would thus be… yup, table-cell.

3 Likes
 <a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" style="display:table;" width="60" height="60" style="display:table-cell;border: solid 5px #38761d;"></a>
    <a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" style="display:table;" width="60" height="60" style="display:table-cell;border: solid 5px #38761d; margin-left: -9px; "></a>

No, re-read my message and try it again comparing what I wrote to what @ronpat provided as his example.

Also, an element cannot have two style attributes.

Is this part right?
style="display:table-cell;border: solid 5px #38761d; margin-left: -9px; "></a

sort of. The display should be applied to the <a> tag, not the image, as a Table has Table Cells, and Table Cells have Content in them. So in this case, <a> is the table cell, the <img /> is the content (you still need to define a table/parent container though).

Or at least that is one way of accomplishing this.

<a href="#nogo">