解决行内元素存在间隙的bug问题

行内元素之间会产生间隙bug问题的场景:

1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

如下代码:

<div>

<a>1</a>

<a>22</a>

<em>333</em>

</div>

解决办法有两种

方法一:将元素写成一行,中间不换行;

<div><a>1</a><a>22</a><em>33</em></div>

方法二:设置font-size:0

div{font-size:0px;}

a,em{font-size:10px;}

方法三:可以为元素设置负margin值,一般为-4,但是根据父级元素的font-size会有相应的变化,使得元素间隙消失

a,em{font-size:10px;margint-right:-4px;}

这个方法对于盒模型比较怪异的IE6/7来说另当别论。

方法四:省略闭合符号

<div>

<a>1

<a>22

<em>333

</div>

当然,还有让内联元素浮动float:left;的办法,此时父级容器需要设置宽高,才好定位内联元素的位置。感兴趣的朋友可以一试。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,813评论 1 92
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 965评论 0 1
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • “少爷,吃饭了。”瑜儿在叫我,我放下书来,瑜儿端来一碗面:“嬷嬷说少爷喜欢清水面,便下了一碗,还给我留了不少呢!”...
    亦火阅读 311评论 0 1
  • 【嵌牛导读】:随着科技革命和通信革命的发生,世界已经进入数字时代,变革快速出现,而人类的思维却总是处于脱节状态。面...
    单行车jing阅读 579评论 0 0