Unwanted Spacing

Please look at http://rkassoc.org/bkflownew/. Note the blank spacing in between the images; I DO NOT want that.

This is very close to this question


Attached is the source.

Now can I fix this so there is NO blank space between the two images?
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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 Johnson, CD, MVPOwnerCommented:
FYI  border="0" is no longer supported. Will be following as I don't know the answer either.
Joe PriorCommented:
Take both the images in single div and use css for the border as shown below:
<img src="images/header1.jpg" style="border:0px"><br><img src="images/menubar.jpg" style="border:0px">

Open in new window

Edwin HofferTechnical ExpertCommented:
Hello Richard,

You can remove the space between the images by using "display:flex;"

Check the below correct Image:

You can also read more about Flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hope that resolved the issue

Best Regards
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

David Johnson, CD, MVPOwnerCommented:
display:flex worked for me unfortunately it doesn't validate.. my editor wants display:flexbox .. the solution seems to distort the image though
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To all:

Neither works. See http://rkassoc.org/bkflownew/index.htm for Joe Prior version; See http://rkassoc.org/bkflownew/index1.htm for Edwin Hoffer version.

Maybe I did the coding wrong; see attached for source of both.

I can't BELIEVE this is Sooooooooooooo complex for something so basic.
Edwin HofferTechnical ExpertCommented:
Try This,

<!DOCTYPE html>

<title>Backflow Inspector</title>
.nobord { padding: 0; margin: 0 auto;display:flex; }
<div class="nobord"><img border="0" src="images/header1.jpg"></div>
<div class="nobord"><img border="0" src="images/menubar.jpg"></div>


Open in new window

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
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
That did it; I don't exactly understand why, I thought that was essentially what I did before.
Edwin HofferTechnical ExpertCommented:
You used <br> code instead of what I gave you. In last code I gave the full code.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Edwin Hoffer,

That's one thing about html / css I have NEVER understood. It seems that <div> sometimes starts on the next line & sometimes on the same line.

Can you provide a link that explains the rule is uses to determine which case it is?


Edwin HofferTechnical ExpertCommented:
Hello Richard,

You can read about flex box here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes 

Best Regards
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

From novice to tech pro — start learning today.