Pixel shift issue with inline-block

Hi all,

Yesterday I was cleaning up code for a friend's website, and I have found a rather bizarre pixel shift issue with inline-block elements. I have a group of images all the same size with inline-block assigned to them, and the bottom row isn't aligning perfectly with the other rows. This issue shows up both in Chrome and Opera, and it also only seems to affect the bottom row. I understand that the browser can render white space around inline-block elements, so I removed all the white space, and yet this issue is still present. I would really prefer not to use floats since I want the ability to center the elements. Maybe there's something obvious I'm missing here. Anyway, here's my code and examples, I stripped out everything but the problem, it's pretty straightforward:

An example page is here.

Here's a picture of the issue isolated, it shows up on both bottom rows in Chrome/Opera:
Inline-Block Elements Misaligned
CSS:
.albumlinks {
	display: inline-block;
	margin:2px;
	vertical-align: middle;
 	width:175px;
	height:175px;   	
}
img.albumimages {
	border: 0;
	width:175px;
	height:175px;
}

Open in new window


HTML:
 <a class="albumlinks" href="#"><img class="albumimages" src="image-example.jpg" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="image-example.jpg" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="image-example.jpg" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="image-example.jpg" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="image-example.jpg" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="image-example.jpg" alt="Image Example"></a>

Open in new window

Coral SAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
First, I recommend you use a better structure. Either add a <div> around each group of links or use a <ul> and put each link in a <li>. It's best not to use multiple <br> elements for vertical spacing.

What I would recommend is using Multi-line Flex in browsers that support it, in addition to inline-blocks for other browsers. (A better structure also makes using Flex much simpler.)
@supports (flex-wrap:wrap) {
	.blocksWrap {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		align-content: flex-start;
	}
}

Open in new window

P.S. Is there a reason why heading elements aren't being used? Those look like <h2> or <h3> elements to me.

Edit: On second thought, it seems using Flex is unnecessary for this. Removing the <br> elements in the DOM Inspector seems to fix this strange misalignment (which seems to have been an issue in Webkit/Blink for quite some time).
2
Slick812Commented:
I agrree with David S., that the added <br> should be taken out, and these days with CSS you do not need to have space added with two or more <br> , you can use padding or margin to have horizontal space.

also to save writing or having the class="albumimages" in all the image you can leave that out and use this cSS -

.albumlinks {
    display: inline-block;
    margin:2px;
    width:175px;
    height:175px;
    vertical-align: middle;
}

.albumlinks img {
      border: 0;
      width:175px;
      height:175px;
}
0
NerdsOfTechTechnology ScientistCommented:
Remove margin from class .albumlinks:

margin: 0px;

Open in new window

This is causing that 2-4 pixel gap.

.albumlinks {
    display: inline-block;
    margin: 0px;
    width:175px;
    height:175px;
    vertical-align: middle;
}

Open in new window


In Chrome, right click, inspect, computed:

2px margin

EDIT:
Found the problem! The whitespace between the last</a> and <br> are causing the issue. I'll post code ASAP
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

NerdsOfTechTechnology ScientistCommented:
Tested: https://jsfiddle.net/azuLmydk/

P.S. margins left in-tact at 2px.

<br> placed immedately after (no whitespace) the <a> and <img> tags fixed the problem.

<!doctype html>
<html>
<head>
<title>Inline-Block Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
	background: #FFF;
	color: #000;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size:16px;
}
a:link {
	color: #941810;
	text-decoration: none;
	
}
a:visited {
	color: #941810;
	text-decoration: none;
	
}
a:active {
	text-decoration: none;
	
}
a:hover {
	color: #AD7B6B;
	text-decoration: none;
	font-weight: normal;
	
}
.wrapper {
	text-align: center;
	max-width: 600px;
	min-width: 320px;
	margin: 0 auto;
	position: relative;
}
.outertable {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	
}
.outertable th, .outertable td {
	padding: 0px;
	text-align: center;
}
img.albumimages {
	border: 0;
	width:175px;
	height:175px;
}
img.albumimages:hover {
	border: 0;
}	
#toriphoria {
	border: 0px;
}
.boldthis {
	font-weight: bold;
}
.content {
	vertical-align: top;

}
.centerthis {

}
.enlarge{
   text-align:center;
   font-size:18px;
}
.albumlinks {
	display: inline-block;
	margin:2px;
	vertical-align: middle;
 	width:175px;
	height:175px;   	
}
.paragraphleft {
	text-align: left;
}
.smaller{
	font-size:13px;	
	line-height:12px;
}	
#bottom{
	line-height:16px;
}	
 @media only screen and (max-width: 400px) { 
img.albumimages {
	width:150px;
	height:150px;
}
#toriphoria img{
	width:316px;
	height:auto;		 
}	 
 }	
</style>

</head>
<body>
<div class="wrapper">
 <div class="boldthis paragraphleft">Photos<br clear=all><br></div> 
 <a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><br clear=all>
 <div class="boldthis paragraphleft"><br><br>Other Photos<br clear=all><br></div>
 <a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><a class="albumlinks" href="#"><img class="albumimages" src="http://via.placeholder.com/175x175" alt="Image Example"></a><br clear=all>
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Coral SAuthor Commented:
Thanks everyone for the input! I'm sort of shocked that it was the <br> elements causing it! When I just remove the margins as NerdsofTech first suggested, the pixel issue is still there.

Page without margins

But when I remove the <br>, it disappears.

Page without <br>

My friend was using lots of <br> in his old code, and I didn't realize it was poor practice to use them so I just left them in. The heading elements I took out just to whip up the example, but yes the structure could definitely be improved as well as some of the CSS. Thanks everyone!
2
Coral SAuthor Commented:
Thanks everyone for all the wonderful suggestions. I was just trying to clear all of the errors out of his code and didn't realize that hanging onto some of the old bits would conflict with my goal. You all gave great solutions!
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.