关于inline-block元素间隙的处理

参考橱窗外的小孩,原文链接https://www.cnblogs.com/showcase/p/10469361.html

如下,两个inline-block之间,会产生默认的间隙。原因是因为元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px。

<div>
<input type="text" placeholder="请输入关键字 />
<button></button>
</div>

那么,如何能处理掉这些间隙呢?列举以下几个(但不限于)五个方法:

1,去除元素间的空白

通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行,可以去除元素间的空白,或者将两个inline-block元素间加上空白注释,或者不写元素的闭合标签等,例如这么写:

<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
<!-- or -->
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>

2,父元素设置font-size为0,子元素单独再设置字体大小

如下所示:

.layout.inline-block .left-center-right {
font-size: 0;
}
.layout.inline-block .left-center-right>div {
font-size: 16px;
}

3,设置margin-right为负值

用margin负值来抵掉元素间的空白,不过margin负值的大小与上下文的字体和文字大小相关,并且同一大小的字体,元素之间的间距在不同浏览器下是不一样的,如:font-size:16px时,Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以这个方法并不通用,也相对比较麻烦,因此不太推荐使用。

4,给inline-block元素加float或者flex

让行内块元素浮动起来,或者给父盒子加上display: flex; 都可以解决空白间隙的问题,不过这样处理的三栏式布局也就没必要用inline-block啦。

5,设置字符间距或者单词间距

这两个方法的原理有点像二所用的font-size,具体做法是给父元素一个letter-spacing或者word-spacing的负值,子元素再调整为0即可,具体使用字符间距还是单词间距其实大同小异。

/* letter-spacing */
.layout .left-center-right{
letter-spacing: -0.5em;
}
.layout .left-center-right>div{
letter-spacing: 0;
} /* word-spacing */ .layout .left-center-right{
word-spacing: -0.5em;
}
.layout .left-center-right>div{
word-spacing: 0;
}

关于css布局中,inline-block元素间隙的处理方法的更多相关文章

  1. html/css解决inline-block内联元素间隙的多种方法总汇

    序 display有几种属性:inline是内联对象,比如<a/> . <span/>标签等,可以“堆在一起”显示,宽高由内容决定,不能设置:block是块对象,比如<d ...

  2. css布局中关于 块状元素和行内元素的区分

    这两天在准备实习的面试和笔试,准备复习一下这些基础的概念,避免自己处于一种仅脑袋理解嘴巴不能表述出来的状态. 块状元素和行内元素的概念是在css页面布局这个地方出现.主要是将html标签按照一定的特性 ...

  3. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  4. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  5. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  6. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  7. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  8. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  9. CSS布局中最小高度的妙用

    CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...

随机推荐

  1. 02 drf源码剖析之快速了解drf

    02 drf源码剖析之快速了解drf 目录 02 drf源码剖析之快速了解drf 1. 什么是drf 2. 安装 3. 使用 3. DRF的应用场景 1. 什么是drf drf是一个基于django开 ...

  2. Django之自带分页模块Pagination

    Django提供了一些类来帮助您管理分页数据 - 即分布在多个页面上的数据,使用“上一页/下一页”链接.这些课程都在django/core/paginator.py. Example¶ 给Pagina ...

  3. Django框架03 /视图相关

    Django框架03 /视图相关 目录 Django框架03 /视图相关 1. 请求相关 2.响应相关 3.FBV和CBV 视图(视图函数和视图类) 3.1 类视图 CBV 3.2 视图函数 FBV ...

  4. 使用QtCreator遇到的一些问题

    0. 背景 最近在学习QtCreator(版本:4.8.1:编译器:MSVC 2017 64-bit),遇到了一些问题,特记录如下.( 1. 引用库 QtCreator可以直接包含Windows.h, ...

  5. Go的100天之旅-常量

    常量 简介 道可道,非常道.这里常道指的永恒不变的道理,常有不变的意思.顾名思义和变量相比,常量在声明之后就不可改变,它的值是在编译期间就确定的. 下面简单的声明一个常量: const p int = ...

  6. 读取文件夹内容解析为Tree结构

    package com.mine.io; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import ...

  7. Ethical Hacking - Overview

    Hacking is gaining unauthorized access to anything. Preparation Setting up a lab and installing need ...

  8. 题解 洛谷 P2287 [USACO07NOV]Sunscreen G

    原题 传送门 有C个奶牛去晒太阳 (1 <=C <= 2500),每个奶牛各自能够忍受的阳光强度有一个最小值和一个最大值(minSPFi and maxSPFi),太大就晒伤了,太小奶牛没 ...

  9. Mybatis——Mapper代理

    mapper的代理对象生成位于org.apache.ibatis.binding.MapperProxyFactory的newInstance方法,使用jdk的动态代理,代理的InvocationHa ...

  10. springboot手动事务回滚

    亲测在使用@Transactional.@Transactional(rollbackFor = Exception.class)及catch异常之后 throw new RuntimeExcepti ...