Sun, 2010-03-14 20:39
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 even after I set padding and margin to zero. In order to get rid of the empty space I have to use margin-bottom:-10px;
Why does this happen? Please copy and paste the following code and view it on your computer.
<!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; height:260px; } #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="http://goyami.corante.com/archives/images/july4th05.gif" /> <img src="http://www.logoogle.com/images/logooward/july4th04.gif" /> </div><!--/#imgCont"--> </div><!--/#canvas--> </body> </html>
Sun, 2010-03-14 21:08
#1
Why can't you use just one
Why can't you use just one image?
Sun, 2010-03-14 21:15
#2
#imgCont img {
#imgCont img { vertical-align: bottom; }
or
#imgCont img { display: block; }
Mon, 2010-03-15 00:46
#3
Deuce wrote: Why can't you
Why can't you use just one image?
Long story short: The bottom image will change.
Thank you both for your prompt responses. Why doesn't margin:0; padding:0; work with inline elements? Could you please explain?
Mon, 2010-03-15 13:20
#4