Member Avatar for stymied2

Hi,

The header of this page is all images arranged in rows using div tags. I set img {vertical-align: bottom} in the css to remove spaces below the images in FF which worked well. But, I am now left with a space above the bottom row of my header that I just can't seem to get rid of.

The CSS is as such:

body {
	margin-top: 0px;
	text-align: center;
	background-color: #0066ff;
	}
img {
	vertical-align: bottom;
	}
#container {
	width: 863px;
	margin-left: auto;
	margin-right: auto;
	}
#header {
	padding: 0px;
	margin: 0px;
	}
#content {
	height: 552px;
	background-image: url(../images/crown_full.jpg);
	background-repeat: no-repeat;
	}
#footer {
	height: 44px;
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
	}

Any suggestions??? :-/

  • 5 Contributors
  • 6 Replies
  • 353 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Brief summary and likely causes: the persistent gap above that bottom row most often comes from three things — an extra row of pixels inside one image (as noted), inline-image baseline/line-height behavior, or literal HTML whitespace between inline elements. and were right to check margins/padding, but if those are already zero the issue usually lives in the image file or the inline formatting model. ’s background-image + fixed-height workaround is a valid stopgap but hides the underlying layout cause.

Quick diagnostics (order matters):

  • Open the suspect image at 100% in an editor and look for one-pixel white/transparent rows at top/bottom; crop if present.
  • In DevTools, temporarily give the image and its parent high-contrast borders/backgrounds to see where the computed box ends.
  • Toggle display/line-height in DevTools to see which change eliminates the gap.

Practical fixes (try one at a time):

Make images block-level (removes baseline whitespace)

.header-row img {
  display: block;
  float: left; /* optional, keeps them side-by-side */
}

If inline layout must be kept, collapse font/line gap on the row

.header-row {
  font-size: 0;
  line-height: 0;
}
.header-row img {
  display: inline-block;
  vertical-align: top;
  font-size: 12px; /* restore font-size for any text children if needed */
}

HTML whitespace trick (if preserving markup spacing is difficult)

<img src="a.png" alt=""><!--
--><img src="b.png" alt="">

Final notes: trimming the image is the cleanest fix if an extra pixel exists; making images block-level is the simplest CSS fix for baseline gaps; setting font-size:0 is reliable for inline-block grids but requires restoring sizes where text is needed. Also verify a standards DOCTYPE to avoid quirks-mode rendering.

Recommended Answers

All 6 Replies

Member Avatar for buddylee17

You have to understand that each browser sets a certain amount of white space between each element. Please read . You'll have to reassign the problem elements to have 0 margin and padding. Also remember that 0px = 0 pizzas = 0 cigarettes. 0=0, regardless of what it represents, so just keep it simple. Just make it 0.

Member Avatar for wickedsunny

seems solved to me. anyways u can use this tag in ur container or where u dont want white space. margin-top:0px;

Member Avatar for peter_budo

seems solved to me. anyways u can use this tag in ur container or where u dont want white space. margin-top:0px;

You may want to read a post by MidMagic in this thread

commented: thanks for telling me about the 0units thing +1
Member Avatar for wickedsunny

omg thts why i face these kinda troubles so much in my websites :( thank u soo much buddy ur a life savior :D u got an additional reputation from me

Member Avatar for stymied2

Thanks for the help. The 'margin for error' article made perfect sense as did the suggestion to remove units of measurement when using 0.

Unfortunately, explicitly assigning each div to a margin and padding of 0 still didn't resolve my challenge. The weird thing was it happened to only one particular div no matter where I placed it and only when using one particular image. I could not see how that was happening. According to FireBug, the browser was making the div 20x high even though the image was only 14px. None of the other divs, although set up the exact same way, were doing that. After admitting to myself that I probably needed to get on with my life I tried just using an empty div with the necessary image in the background and setting the height there - which worked fine. I'm still not sure what was going on - and it was the same in both FF and IE. <shrug>

Member Avatar for MidiMagic

Check for an anomaly in an image. It might have one extra vertical pixel.

I went bonkers trying to eliminate such a space, and found that one of the images had an extra row of pixels, all white, at the bottom. This made the browser make that row one pixel higher, displaying a white background below the other images in the row.

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.