这是我的HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<div style="border:1px solid red; float:left; padding:0;">
<img src="xxx.jpg">
</div>
我不知道为什么div包含一些填充底部甚至我设置填充:0.
如果我删除DOCTYPE,则不会发生此问题.有没有其他方法可以在不删除DOCTYPE的情况下解决此问题？
应该很容易吧？只需将包含div的外部填充设置为零,并将外部div内的两个并排div设置为余量:0但这对2个水平div之间的空间没有影响.我需要的是红色轮廓的左侧div来触摸绿色轮廓的右侧div.
尽管我努力使用填充和边距,但两个div之间的空间不会消失.
我已经看了很多关于SO的答案,但到目前为止还没有人把它分解为这个简单的例子 - 我的小提琴显示了这个问题,
http://jsfiddle.net/Shomer/tLZrm/7/
这是非常简单的代码:
<div style="border: 4px solid blue; white-space:nowrap; margin:0; padding:0; width:80%">
<div style="display:inline-block; width:45%; overflow:hidden; margin:0; border: 1px solid red"> Flimmy-flammy
</div>
<div style="display:inline-block; width:50%; overflow:hidden; margin:0px; border: 1px solid green"> Hambone-Sammy
</div>
</div>