Member Avatar for vishalkhialani

Hello,
I am currently developing a site I am unable to remove a white space on the image sometimes it appears of the right some times to left depending on the browser. Please advice how to I get rid of it.

Any type of help and guidance will be much appareciated.

Cheers,
Vishal Khialani

white_space_on_the_side_of_the_image.jpg 176.39 KB
  • 3 Contributors
  • 3 Replies
  • 74 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vishalkhialani

Dani AI

Generated

Thread context: had an intermittent white gap beside a header image; flagged spacing, and posted a full layout example — the OP later confirmed the problem was fixed. The suggestions below add focused diagnostics and fixes that are commonly overlooked in cross‑browser image-layout issues.

  • Verify the image file itself. Open it in an editor to confirm there are no extra transparent pixels or hard margins baked into the asset.
  • Images are inline by default and can introduce a baseline gap. Converting the element to a block-level image removes that inline gap:
img { display: block; }
  • Inline-block elements and HTML whitespace can create a small visual gap between elements; removing the literal space in the markup or collapsing parent font-size are non‑CSS-reset ways to eliminate it.
  • Use the browser DevTools’ computed box model to see which element contributes the gap (margins, borders, padding, or invisible content). MDN has a concise inspector guide: Page Inspector.
  • When centering backgrounds or relying on percentage widths, subpixel rounding can shift the image by a pixel in different engines. If centering causes 1px shifts, try an exact pixel layout at the breakpoint or explicit pixel offsets as a fallback. See MDN on the img element defaults and vertical-align behavior for more detail: HTML img element and vertical-align.

These checks complement the spacing/layout hints already posted by and the structural example from , and they help isolate whether the gap is an asset issue, an inline formatting artifact, or a subpixel/browser rendering difference.

Recommended Answers

All 3 Replies

Member Avatar for JugglerDrummer

have you set the padding to 0px?

Member Avatar for essential

Controlling page layout's in different browsers is a big mess, but you can apply some workaround to get over it...

Here's a simple layout sample, which you can run for testing:
Assuming that you have the following layout order.

<html>
<head>
<title>Site Title</title>
<style type="text/css">
<!--
/* CSS RULE EXAMPLE */
body { background-color : #fff; }
div {
  background-color : #ccc;
  border : 1px solid #000;
  min-height : 100px;
  margin : 0;
  padding : 0; }

div#wrapper {
  margin : 0 auto;
  min-width : 974px;
  width : 100%; }

/* The image background rules example */
div#main {
  background : transparent url(final1.jpg) no-repeat center top;
  clear : both;
  margin : 0 auto;
  height : 309px !important;
  overflow : hidden;
  max-height : 309px;
  max-width : 974px;
  width : 974px !important; }
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><!-- 01 --></div>
<div id="main"><!-- 02 --></div>
<div id="footer"><!-- 03 --></div>
</div>
</body>
</html>

try to run the whole document in different browsers and see how the layout worked, if its still having the same slipped with the white-spaces.

Member Avatar for vishalkhialani

Hi,
Thank you everyone for your help. I was able to solve the problem from the pointers I got from you all.

Cheers,
Vishal

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.