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

前几天写一个页面

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

登录后复制

  1.   

登录后复制登录后复制

  1.   

登录后复制登录后复制

  1.  

登录后复制

 发现宽度为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;

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    关于CSS反射倒影的研究思考

    2025-3-28 8:46:18

    编程技术

    ul+li标签制作表格

    2025-3-28 8:46:28

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索