Member Avatar for ryy705

Hello,
I've cut up a single image into two and I would like them to sit on top of each other. Unfortunately, I can't get rid of the empty space between the two images.

How is this done?
Please copy and paste the code if you wish to view it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#canvas {
  margin-left: auto;
  margin-right: auto;
  width:969px; 
}

#imgCont{
 float:left;
 width:276px;
}
#imgCont img{
 padding:0;
 margin:0;
 border-top: 1px solid blue;
 border-bottom:1px solid black;
}
</style>
<title>Conforming XHTML 1.1 Template</title>

</head>

<body>
  <div id="canvas">
   <div id="imgCont"
     <img src="" />

	 <img src="" />
   </div><!--/#imgCont"-->
  </div><!--/#canvas-->

</body>
</html>
  • 5 Contributors
  • 6 Replies
  • 123 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

sliced images stacked vertically but an unwanted gap remained. (padding/margins), (negative margin), (float) and (whitespace) all suggested useful angles. The actual root cause is not margins: it’s how inline images participate in text layout. Images are inline-replaced elements aligned to the text baseline, so browsers reserve space for descenders (the “g/q” space) and for any literal whitespace/newlines between tags.

Three reliable ways to remove that gap (pick one based on layout needs):

  • Make the images block-level so they stack without baseline spacing:
.img-stack img {
  display: block;
}
  • Keep them inline but remove baseline spacing by changing alignment:
.img-stack img {
  display: inline-block;
  vertical-align: top;
}
  • Collapse the inline line box so the gap disappears (use with caution when the container has text):
.img-stack {
  line-height: 0;
}

Notes and troubleshooting:

  • Negative margins (as tried) are brittle across browsers and should be avoided if a cleaner CSS solution is possible.
  • Floating (as suggested by ) will also remove the gap, but floats affect document flow; use a clearfix (or overflow:auto) on the parent to contain them if needed.
  • Literal spaces/newlines between <img> tags create a visible gap (as noted). Removing the whitespace or placing the tags immediately adjacent (or using an HTML comment between them) also fixes it without changing CSS.
  • Validate markup: a missing > or malformed tag can change DOM parsing and produce odd spacing (double-check the <div id="imgCont"> line).

For final checks, inspect the computed display, line-height, and vertical-align values in browser dev tools to confirm which solution removes the gap in the specific layout.

Recommended Answers

All 6 Replies

Member Avatar for techniner

Hello,
I've cut up a single image into two and I would like them to sit on top of each other. Unfortunately, I can't get rid of the empty space between the two images.

How is this done?
Please copy and paste the code if you wish to view it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#canvas {
  margin-left: auto;
  margin-right: auto;
  width:969px; 
}

#imgCont{
 float:left;
 width:276px;
}
#imgCont img{
 padding:0;
 margin:0;
 border-top: 1px solid blue;
 border-bottom:1px solid black;
}
</style>
<title>Conforming XHTML 1.1 Template</title>

</head>

<body>
  <div id="canvas">
   <div id="imgCont"
     <img src="" />

	 <img src="" />
   </div><!--/#imgCont"-->
  </div><!--/#canvas-->

</body>
</html>

I suggeest using css style sheet or inline css to pad 0px to place them right next to each other.

padding-right: 0; and padding-left: 0px; on the other side.

Member Avatar for ryy705

I suggeest using css style sheet or inline css to pad 0px to place them right next to each other.

padding-right: 0; and padding-left: 0px; on the other side.

padding and margins are already set to 0.
And the images are set up to line up vertically.

Member Avatar for digital29

have you tried margin-bottom: -10px; ?
I know it sounds strange...but I have been using this method for a while and it works good..

Member Avatar for ryy705

Would anyone know why I have to set margin-bottom:-10px why wouldn't margin:0 work?

Member Avatar for ko ko

Float these images.

img {
        float: left
        }

Notice that float makes browser debug. But it should work.

Member Avatar for almostbob

production code should not be indented, it causes problems
whitespace in your code
html interprets whitespace as a space
multiple tabs and spaces before <img are a space,
that space shows between the images

<img src="" /><img src="" />

no space

I assume the closing > in line 31 is a typo and not reflected in the code with problems

Edited by almostbob because: n/a
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.