css inline-block 行内元素的空隙问题

css inline-block 行内元素的空隙问题

来源: | 浏览: 2761 | 评论: 0发表时间: 2013-07-27 02:17:14

css中的inline-block可以使元素同时具有行内inline属性和块元素的block属性,在行内排版块元素和代替浮动非常有用,可是,如果不了解inline-block的细节的话,就会出现奇怪的问题(4px空隙).



神奇的4px空隙

比如要实现三个div元素在同一排摆放,利用Inline-block就非常简单,可能你会这么写:


inline-block

css中,指定了三个元素的长度为20%,30%,50%,并且有inline-block属性,可是,显示的结果往往是这样的:


4px空隙

造成这种情况的原因是:在元素之间有空隙,而这些空隙占用了一部分地方,想要元素完全拼合,只需去掉元素之间的空隙就好了,比如html改成下面这样子:


html去掉空隙

如果是使用模板来循环输出的话,可以在元素前后加上 "<!--","-->" 来隐藏中间的空白.改变html结构后,效果就出来了:


行内元素的空隙


相关文章
没有人评论过此文,还不快抢个沙发
  • 昵称: *
  • 邮箱:
  • 网址:
  • 记住我的信息
  • Color
  • Red
  • Blue
  • Code
  • bash
  • cpp
  • css
  • java
  • js
  • perl
  • php
  • python
  • ruby
  • sql
  • xml








最新评论