<img src="https://i.imgur.com/HJolSyI.png" style="border: solid 5px;" />
<img src="https://i.imgur.com/yj38Wz2.png" style="border-top: solid 5px;border-bottom: solid 5px;border-right: solid 5px;" />
<img src="https://i.imgur.com/NdpnmZw.png" style="border-top: solid 5px;border-bottom: solid 5px;border-right: solid 5px;" />
Can someone tell me if this is right?
margin-left: -4px;
<img src="https://i.imgur.com/HJolSyI.png" style="border: solid 5px;" />
<img src="https://i.imgur.com/yj38Wz2.png" style="margin-left: -4px;border-top: solid 5px;border-bottom: solid 5px;border-right: solid 5px;" />
<img src="https://i.imgur.com/NdpnmZw.png" style="margin-left: -4px;border-top: solid 5px;border-bottom: solid 5px;border-right: solid 5px;" />
How do you keep the boxes from breaking apart?
<img src="https://i.imgur.com/u3zWye4.png" style="margin-left:0;height:60px;border: solid 5px #38761d" />
<img src="https://i.imgur.com/MAqbcs2.png" style="height:60px;margin-left: -4px;border-top: solid 5px #38761d ;border-bottom: solid 5px #38761d;border-right: solid 5px #38761d" />
<img src="https://i.imgur.com/287lotJ.png" style="height:60px;margin-left: -4px; border-top: solid 5px #38761d;border-bottom: solid 5px #38761d;border-right: solid 5px #38761d" />
Topics merged, as they are clearly connected.
Hi there asaass,
I would suggest that you should always do it with âT.L.Câ. 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#social-links img{
float: left;
border: 0.25em solid #000;
}
#social-links a:nth-child(2) img {
border-right: 0;
border-left: 0;
}
</style>
</head>
<body>
<div id="social-links">
<a href="https://www.facebook.com"><img src="https://i.imgur.com/HJolSyI.png" width="60" height="60" alt="facebook"></a>
<a href="https://www.twitter.com"><img src="https://i.imgur.com/yj38Wz2.png" width="60" height="60" alt="twitter"></a>
<a href="https://www.pinterest.com"><img src="https://i.imgur.com/NdpnmZw.png" width="60" height="60" alt="pinterest"></a>
</div>
</body>
</html>coothead
More variations:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>variations</title>
<!--
https://www.sitepoint.com/community/t/how-would-i-connect-the-2-images-to-the-middle-image/252665
asasass
Feb 6,2017 11:18 PM
-->
<style type="text/css">
div,ul {margin:10px auto;}
.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;
}
.socialbutts {
display:table;
border-spacing:5px;
outline:1px dashed red;
}
.socialbutts span,
.socialbutts a {
display:table-cell;
border:5px solid #000;
border-radius:20px;
}
.socialbutts img {
display:block;
width:100%;
height:auto;
border-radius:15px;
}
.socthingys {
list-style:none;
display:table;
border-spacing:5px;
background-color:#000;
padding-left:0;
margin:10px auto;
outline:1px dashed red;
}
.socthingys li {
display:table-cell;
}
.socthingys img {
display:block;
width:100%;
height:auto;
}
.socialites {
display:table;
white-space:nowrap;
word-spacing:-.5em;
margin:10px auto;
outline:1px dashed red;
}
.socialites span {
display:inline-block;
vertical-align:top;
width:33.33%;
max-width:154px;
box-sizing:border-box;
word-spacing:0;
border:5px solid #000;
border-radius:20px;
margin-left:5px;
}
.socialites span + span {
margin-left:-5px;
}
.socialites img {
display:block;
width:100%;
height:auto;
border-radius:15px;
}
</style>
</head>
<body>
<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>
<div class="socialinks">
<a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></a>
<a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></a>
<a href="#nogo"><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></a>
</div>
<div class="socialbutts">
<a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></a>
<a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></a>
<a href="#nogo"><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></a>
</div>
<ul class="socthingys">
<li><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></li>
<li><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></li>
<li><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></li>
</ul>
<div class="socialites">
<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>
</body>
</html>
Is there a certain way where I can use this code with just inline styles where it doesnât break apart?
<div class="socialinks">
<a href="#nogo"><img src="https://i.imgur.com/HJolSyI.png" width="154" height="154" alt=""></a>
<a href="#nogo"><img src="https://i.imgur.com/yj38Wz2.png" width="154" height="154" alt=""></a>
<a href="#nogo"><img src="https://i.imgur.com/NdpnmZw.png" width="154" height="154" alt=""></a>
</div>
What do you mean by âbreak apartâ? Are you taking about the icons wrapping onto a new line at narrower widths?
this: Post 2 on here.
And when does that occur? When you narrow the browser window, or at all sizes?
Is there a reason youâre so dead set against using the best practices which have been given to you time and time and time again? I know that there have been MANY comments over your various threads that inline styles cause more rework in the long run. Inline styles ALSO have the risk of inconsistent application of styles over similar content.
When you narrow the browser. But it doesnât do that with @ronpat code.
So why not use that code?
If your parent container is more than 462px wide, youâre going to get wrapping. Thatâs just the nature of the beast.
Iâm trying to see what from his code I can add to my code.
I need to add
display:table-cell;
to it some how.
Then youâre probably going about it the wrong way; you canât mix-and-match code and expect the results to be consistent.
If youâre determined to use inline styles, then you can add the styles from @ronpatâs example to the relevant element(s) in that HTML, but donât mix them with any other styles.
I was able to cut the code down this much.
<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;">
Imgur puts border=â5â in all their image codes even though its obsolete.
I believe there was a discussion in one of your other threads about how some big organizations use out-of-date coding and why they havenât changed. Just because someone else uses out-of-date and deprecated code doesnât mean it is right and you are okay to use it.
Always strive to use best practices. They are âbest practicesâ for a very good reason. The more you try to code things the right way, the less likely you will be to run into problems with your code.