资讯专栏INFORMATION COLUMN

如何去除行内元素之间的间隙

neu / 2912人阅读

摘要:代码如下大树小草花朵太阳效果如图所示,标签为行内元素,他们之间按上面布局会出现空隙,这些空隙是怎么产生的。由此可以推断出行内元素之间的空隙是由标签换行产生的。如果把标签的改为也会出现上述问题。

HTML代码如下

效果如图所示,a标签为行内元素,他们之间按上面布局会出现空隙,这些空隙是怎么产生的。现在做如下调整:

此时可以看出,a标签之间的空隙消失了。由此可以推断出行内元素之间的空隙是由标签换行产生的。
如果把a标签的display改为inline-block 也会出现上述问题。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114174.html

相关文章

  • white-space:nowrap 妙用

    摘要:对于多个元素同在同一行的布局,如比较常见的是轮播。因此最好显式设置的垂直方向上的对齐。做法一的案例有淘宝首页的主轮播通过子元素浮动,父元素清除浮动。可看出这与与应用了的文本容器效果一样。上的效果,应该也一样。 对于多个元素同在同一行的布局,如比较常见的是轮播。下面我将探讨这这一布局的做法: 首先约定html结果如下: div.row div.col div.col di...

    qqlcbb 评论0 收藏0
  • inline-block兼容及间隙问题

    摘要:一兼容性不识别但可以触发块元素,其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置,使用触发。 一、兼容性: 1. IE6、IE7不识别inline-block但可以触发块元素,其它主流浏览器均支持inline-block。 注:在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致 原因分析:使用inline-block属性在IE下会...

    learn_shifeng 评论0 收藏0
  • inline-block兼容及间隙问题

    摘要:一兼容性不识别但可以触发块元素,其它主流浏览器均支持。两个要先后放在两个样式声明中才有效果直接设置,使用触发。 一、兼容性: 1. IE6、IE7不识别inline-block但可以触发块元素,其它主流浏览器均支持inline-block。 注:在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致 原因分析:使用inline-block属性在IE下会...

    binaryTree 评论0 收藏0
  • 深入css之去除inline-block元素之间多余间隙

    摘要:父容器设置优点弹性布局可以去除多余间隙,而且可以轻松的实现垂直居中,水平居中等效果。缺点过低版本的浏览器不支持该属性。 什么是inline-block之间的多余间隙 考虑以下代码: One Two Three nav a { display: inline-block; //或者inline; padding: 5px; background: red; }...

    caspar 评论0 收藏0
  • 「前端早读君008」新手必踩坑之display: inline-block

    摘要:中线基线顶线底线中线基线顶线底线是文本的几个基本线,其对应位置如下图基线小写英文字母的下端沿。中线小写英文字母的中间。将元素的基线与其父元素的下标基线对齐。将元素的基线对准给定长度高于其父元素的基线。 今日励志语 往日不可追,来日犹可期,祝大家2019年继往开来 迷之间隙 我们创建一个导航列表,并将其列表 item 设置为 inline-block,主要代码如下: 我 我 ...

    sevi_stuo 评论0 收藏0

发表评论

0条评论

neu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<