inline-boock的默认间距
|
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的默认间距的更多相关文章
- 如何去除掉inline-block元素之间的默认间距
前几天写一个页面 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li& ...
- inline-block默认间距
inline-block元素默认会有间距 解决方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了.考虑到代码可读性,显然连成一行的写法是不可 ...
- Android 部分机型GridView四周默认间距
在测试兼容性时候,部分机型,比如联想和一加等手机,在使用Gridview的时候,会默认四周有默认边距,10dp左右. 这时候需要设置 android:listSelector="@andro ...
- 如何去除inline-block的默认间距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 去掉inline-block元素默认间距的几种方法
方法1:使用负margin值一般是-3px,部分浏览器可能不同,不太推荐使用. 方法2:去掉多余空格将元素紧挨着写去掉多余空格,但降低了可读性. 方法3:使用font-size:0在外层父元素加上fo ...
- JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置
---恢复内容开始--- 圆角矩形 border-radius:50% 40% 30% 33px: 像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...
- 关于css中列表(ul ol)存在默认间距的问题
一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在 ...
- 清除inline-block元素默认间距
1. font-size:0; 2.letter-spaceing:-0.5em;
- inline-block默认间距解决方法
方法一: 父元素设置font-size: 0; 行内块元素有文字时再在该元素上设置font-size 方法二: 父元素设置word-spacing为负 方法三: Inline-block 元素浮 ...
随机推荐
- sys.stdout.write与sys.sterr.write(三)
目标: 1.使用sys.stdout.write模拟"|"的顺时针变化- \ | / 2.使用sys.stderr.write模拟"|"的顺时针变化- \ | ...
- iOS中的__typeof与typeof
做SDK开发引入AFNetworking那么多的文件不太合适,所以这几天在精简AFNetworking,并共享中github上,https://github.com/yjh4866/Simplifie ...
- iOS,非视图类方法
1.判断类的实例 2.获取当前最高层Window 3.获取当前app是否活跃 4.允许所有请求 5.判断设备是否越狱 6.移除字符串换行符和空格 7.iOS注释方法或属性废弃或不可用 8.本地通讯录操 ...
- Python模块和包
模块和包是python组织代码的基本方式. 模块: python的每一个脚本文件都可称之为模块,模块的名称就是脚本的文件名.例如当我们写了一个test.py的脚本文件,则可以在同目录下的另外一个脚本m ...
- [Android Tips] 21. Regex Named Groups in Android
Android SDK 并没有包含 Java 7 新增加的命名捕获组功能,需要使用第三方库 https://github.com/tony19/named-regexp import com.goog ...
- Memcached,你懂的
一.Memcached简介 Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网 ...
- iOS代码签名理解
前言 做了几年iOS app coder了,对于证书的生成.使用流程烂熟于心,然而对于这套机制的原理却一直不甚理解.近来由于工作需要仔细研究了一下,特将自己的学习经验记录于此,以供大家学习指正. 问题 ...
- C/C++ 结构体 指针 函数传递
#include <stdio.h> #include <stdlib.h> struct student{ int num; ]; double dec; }; void s ...
- poj 2393 Yogurt factory
http://poj.org/problem?id=2393 Yogurt factory Time Limit: 1000MS Memory Limit: 65536K Total Submis ...
- 802.1X基础
这是一个认证规范.使用EAPOL协议在客户端与认证端交互. EAPOL协议:Extensible Authentication Protocol over LAN. 假设三个实体: 客户端:PC 认证 ...