一、问题

这里部分的组成是一个input框和一个a按钮,然后a标签为了设置它的width和height我让他display:inline-block(行内元素以块级元素显示内容)。神奇的一幕出现了,两者之间出现了间隙。上图是已经处理完间隙问题的。

<p>
<input type="text" placeholder="请输入内容" class="add-contact" />
   <a href="#">添加收件人</a>
</p>

二、原因

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了

三、解决方法

法一:将内容写在同一行。

<p>
<input type="text" placeholder="请输入内容" class="add-contact" /><a href="#">添加收件人</a>
</p>

这个方法只适用内容不多,不然会有点影响代码的可阅读性噢~

还有很多个解决方法,比如通过设置margin负值来实现;去掉闭合标签;设置font-size:0,此时针对chrome浏览器要设置 -webkit-text-size-adjust:none;

资源参考:http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

inline-block元素之间出现间隙的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 如何消除inline-block元素之间的间隙?

    一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...

  3. 当li设置为line-block时,元素之间出现间隙的原因和解决方法

    原因 因为浏览器默认把inline元素之间的空白符(Tab.空格.换行)渲染成一个空格.而如下述代码,两个li元素之间的换行符被渲染成一个空格,则元素之间产生了间隙. 用Chrome浏览器将场景模拟出 ...

  4. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  5. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  6. 去除inline-block之间的间隙

    在使用display: inline-block;时,这些inline-block之间会有间隙,根据无双 - <去除inline-block元素间的空隙>的说法,这个间隙是4px或者8px ...

  7. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  8. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  9. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

随机推荐

  1. nodejs对静态文件目录的处理

    Serving static files in Express To serve static files such as images, CSS files, and JavaScript file ...

  2. 如何解决jquery版本冲突

    <!-- 引入1.6.4版的jq --> <script src="<a href="http://ajax.googleapis.com/ajax/lib ...

  3. crontab 中 python(cx_Oracle)脚本执行时需要用户环境变量,怎么办??

    import cx_Oracle Traceback (most recent call last): File "", line 1, in ? ImportError: lib ...

  4. EasyUI 树形菜单tree 定义图标

    { "id":1, "text":"Folder1", "iconCls":"icon-save", ...

  5. 忽然想到,为什么以前iOS的工资高

    听说做iOS的在上海工资也可以  前几年还行,现在也不太行了除非你水平很高 现在移动应用已经100多万了,基本饱和了以前是新的商业模式要抢时间,会的人也少

  6. ASPX在Debug模式下直接link原始CSS而非Bundle后的CSS

    由于对CSS做了bundle, debug的时候修改原始css文件不会直接反映到浏览器中, 效率较低. 于是我想在debug的时候直接link原始CSS. 很简单. <% #if DEBUG % ...

  7. UVA 10716 Evil Straw Warts Live(贪心)

    Problem D: Evil Straw Warts Live A palindrome is a string of symbols that is equal to itself when re ...

  8. 结论: blocking_query 是当前堵塞其他会话正在运行的SQL.而不是原始堵塞SQL

    查看当前session线程号 mysql> select connection_id(); +-----------------+ | connection_id() | +---------- ...

  9. Java中int与Integer

    一般小写字母开头的是数据类型(如int double),大写字母开头的一般是封装为类(如Double),里面有很多方法,比如实行转换Integer.parseInt(arg0),可以把其他类型的数据转 ...

  10. Codevs_1017_乘积最大_(划分型动态规划/记忆化搜索)

    描述 http://codevs.cn/problem/1017/ 给出一个n位数,在数字中间添加k个乘号,使得最终的乘积最大. 1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提 ...