如何去除掉inline-block元素之间的默认间距
前几天写一个页面
div{width:900px;}
div li{ display:inline-block; width:300px;}
<ul>
<li></li>
<li></li>
<li></li>
</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-block元素之间的默认间距的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- 在Chrome与火狐中,输入框input类型为number时,如何去除掉的自带的上下默认箭头
如何移除input='number'时浏览器自带的上下箭头: CSS样式: /* 去除input[type=number]浏览器默认的icon显示 */ input::-webkit-outer-sp ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
随机推荐
- Project Euler 26 Reciprocal cycles
题意:求1到n中所有数的倒数中循环小数循环体最长的数 解法:如果一个数的质因子只有2和5,那么这个数的倒数一定不是一个循环小数.如果一个数含有质因子2或5,那么它的循环体和去掉质因子2和5之后的数的循 ...
- 【管理工具】Kerberos简单应用
Kerberos这一名词来源于希腊神话“三个头的狗——地狱之门守护者”系统设计上采用客户端/服务器结构与DES加密技术,并且能够进行相互认证,即客户端和服务器端均可对对方进行身份认证.可以用于防止窃听 ...
- Webdriver API (一)
(转载) 1.1 下载selenium2.0的包 官方download包地址:http://code.google.com/p/selenium/downloads/list 官方User Guid ...
- 0R电阻作用
0欧电阻的作用(网上收集整理的) 0欧的电阻大概有以下几个功能: ①做为跳线使用.这样既美观,安装也方便. ②在数字和模拟等混合电路中,往往要求两个地分开,并且单点连接.我们可以用一个0欧的电阻来 ...
- HDU 1540 Tunnel Warfare 线段树区间合并
Tunnel Warfare 题意:D代表破坏村庄,R代表修复最后被破坏的那个村庄,Q代表询问包括x在内的最大连续区间是多少 思路:一个节点的最大连续区间由(左儿子的最大的连续区间,右儿子的最大连续区 ...
- prefuse学习(一)用非数据库连接和xml的方式读入数据
prefuse正常的数据源需要从ConnectionFactory中生产出来,但是如果平时不想用里面给的方法得到数据,就需要手动创造Graph里面所需要的内容两个Table 下面是我自己写的从文件中读 ...
- HW5.31
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- 访问修饰符(access modifier)。
1)public(公共的):被 public所修饰的属性和方法可以被有类访问. 所修饰的属性和方法可以被有类访问. 2)protected (受保护的):被protected所修饰的属性和方法可以在类 ...
- linux 配置静态IP
ip配置方法是编辑sudo nano /etc/network/interfaces 树莓派默认配置 auto lo iface lo inet loopback iface eth0 inet d ...
- Java实现在访问者模式中使用反射
集合类型在面向对象编程中很常用,这也带来一些代码相关的问题.比如,“怎么操作集合中不同类型的对象?” 一种做法就是遍历集合中的每个元素,然后根据它的类型而做具体的操作.这会很复杂,尤其当你不知道集合中 ...