读书人

inline Element彼此之间多出几像素的空

发布时间: 2012-09-20 09:36:50 作者: rapoo

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。

读书人网 >Web前端

热点推荐