`
hyj1254
  • 浏览: 336062 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

inline Element相互之间多出几像素的空白

 
阅读更多
若干个行内元素并排排列,margin,padding都设成0了,但它们相互之间还是莫名其妙地多出了几像素的空白。这不是那个ie6bug，但很容易被忽略，也很难查出原因：和元素的排版方式有关。 
<!doctype html>
<html>
	<head>
		<title>model</title>
		<style><!--
		body * {margin:0;padding:0;}

		--></style>
	</head>

	<body>
		<span>第1层</span>
		<span>第2层</span>
	</body>

换成如下再看看： 
<!doctype html>
<html>
	<head>
		<title>model</title>
		<style><!--
		body * {margin:0;padding:0;}

		--></style>
	</head>

	<body>
		<span>第1层</span><span>第2层</span>
	</body>

两段文字终于紧挨着了。简而言之：如果不想“行内元素”之间多出空白，则在排版时要把它们写在同一行。这个现象目前试过的浏览器ie/ff/chrome都有，按理说自有其道理不是bug。
0
顶
2
踩
分享到：
| 《人性的弱点》不是靠学来的
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics