• 技术文章 >web前端 >html教程

    如何去除掉inline-block元素之间的默认间距

    2016-09-24 09:02:48原创592
    前几天写一个页面

    div{width:900px;}
    div li{ display:inline-block; width:300px;}
    
      
  •   
  • 
    

     发现宽度为900px的div居然放不下3个宽度为300px的内联元素li,只好改用了float:left来布局。后来上网一查,才知道inline-block是有默认间距的,默认间距为4px,并且inline也是有默认间距。现在就来盘点一些解决inline-block元素和inline元素之间间距的一些方法:

    1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。

    2、设置margin-right为负值,但要考虑上下文的字体和文字大小。

    3、先设定子元素字体,再设置父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;

    4、设置父元素letter-spacing或word-spacing为负值,要考虑字体,子元素有文字也要注意设置letter-spacing或word-spacing的值。

    5.float:left;

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:如何去除掉inline-block元素之间的默认间距
    上一篇:ul+li标签制作表格 下一篇:关于CSS反射倒影的研究思考
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• html +CSS+div学习――第二课_html/css_WEB-ITnose• html实现跳转_html/css_WEB-ITnose• ExtJs教程15• Axure做注册模块的一些小操作_html/css_WEB-ITnose• css优先机制_html/css_WEB-ITnose
    1/1

    PHP中文网