1
2
3
4
div{width:900px;}
div li{ display:inline-block; width:300px;}
<ul>
    <li></li>
1
<li></li>
1
<li></li>
1
</ul>

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

inline-boock的默认间距的更多相关文章

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

    前几天写一个页面 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li& ...

  2. inline-block默认间距

    inline-block元素默认会有间距   解决方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了.考虑到代码可读性,显然连成一行的写法是不可 ...

  3. Android 部分机型GridView四周默认间距

    在测试兼容性时候,部分机型,比如联想和一加等手机,在使用Gridview的时候,会默认四周有默认边距,10dp左右. 这时候需要设置 android:listSelector="@andro ...

  4. 如何去除inline-block的默认间距

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  5. 去掉inline-block元素默认间距的几种方法

    方法1:使用负margin值一般是-3px,部分浏览器可能不同,不太推荐使用. 方法2:去掉多余空格将元素紧挨着写去掉多余空格,但降低了可读性. 方法3:使用font-size:0在外层父元素加上fo ...

  6. JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置

    ---恢复内容开始--- 圆角矩形 border-radius:50%  40%  30%  33px:   像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...

  7. 关于css中列表(ul ol)存在默认间距的问题

    一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在 ...

  8. 清除inline-block元素默认间距

    1. font-size:0; 2.letter-spaceing:-0.5em;

  9. inline-block默认间距解决方法

    方法一: 父元素设置font-size: 0;  行内块元素有文字时再在该元素上设置font-size 方法二: 父元素设置word-spacing为负 方法三: Inline-block   元素浮 ...

随机推荐

  1. requests库基本使用

    在python中,字典的输出内容跟json格式内容一样,但是字典的格式是字典,json的格式是字符串,所以在传输的时候(特别是网页)要转换使用. r.text返回的是Unicode型的数据. r.co ...

  2. 查看apache、linux、kernel、nginx等版本

    查看apache版本 /usr/sbin/apachectl -v httpd -v 安装目录,使用apachectl -v   查看mysql版本 mysql –help | grep Distri ...

  3. MAC使用MAMP构建自签名HTTPS环境

    一.生成HTTPS自签名证书 1.下载最新的openssl的安装包,下载地址:https://www.openssl.org/source/ 2.解压最新版openssl,可以直接双击使用MAC自带的 ...

  4. 在线免费生成 <IDEA>全系列 注册码

    body { background: #fff; color: #333; font-family: Consolas, sans-serif; margin: 2em auto; width: 70 ...

  5. android nfc中Ndef格式的读写

    1. 在onCreate()中获取NfcAdapter对象: NfcAdapter nfcAdapter = NfcAdapter.getDefaultAdapter(this); 2.在onNewI ...

  6. 真正shopex分销王2代DRP系统源码正版安装版本终身商业授权

    真正ShopEx分销王系统2代正版授权.该商业程序已经完整授权,已测试100%完整能用.很多朋友来问是否免费版的源码?错,这是和官方一样的平台版本,100%无限制功能使用,跟官方付费使用的授权版一样. ...

  7. Remove-Azureaccount (Can't get Azure credentials to stick in Powershel)

    https://social.technet.microsoft.com/forums/azure/en-US/260df055-7c4e-4ce2-8f8d-190ad20a4b76/cant-ge ...

  8. 无法打开键: UNKNOWN\Components\BE1FB738077DBE490AF18C3B9B1A1EE8\E5F5286B58B542741A00A0A9AA420B27

    MSI (s) (D8:38) [07:38:20:634]: 产品: Microsoft SQL Server VSS 编写器 -- 错误 1402.无法打开键: UNKNOWN\Component ...

  9. 使用宏命令撤销EXCEL工作表保护

    EXCEL工作表编辑资料,设置了工作表保护后,不能对表格进行插入删除操作.如果没有密码,很简单:工具-选项—工作表保护——撤消工作表保护 就可以了.如果忘记密码,如下操作: 1. 打开文件 2. 工具 ...

  10. Spring学习笔记之五----Spring MVC

    Spring MVC通常的执行流程是:当一个Web请求被发送给Spring MVC Application,Dispatcher Servlet接收到这个请求,通过HandlerMapping找到Co ...