inline元素的间距问题

我们经常遇见图片之间出现间距的问题，从这个问题入手，总结下原理。

任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。----《CSS权威指南》

图片文字等内联元素默认的对齐方式是和它的父级的 baseline 进行对齐的，撑开高度的却是元素整体的高度（bottom line）

解决方案：

1、变成块级元素，因为只有inline 元素才会发生这个问题；

2、vertical-align 的默认属性就是 baseline ，只要设置了跟 baseline 不一样的属性，都可以避免这个问题；

3、把inline元素浮动起来，因为已经不在当前文档流中了，布局的时候自然也就不会参照这个文字去进行对齐了；

4、把父元素的文字大小设成0，既然你根据文字的基线去对齐，直接把文字设没了，这样就没法定位了。

line-height与height高度相同,为什么就上下居中了？

在默认状态下，如果没有其他因素的干扰，文本会被一个content area box包裹，它的大小有字体的大小决定，这个时候content area box的大小和line box是相同的，当设置line-height属性之后，会有如下处理:

1.获取半行间距：半行间距=（line-height-content area box(也就是字体的大小)）/2。

2.然后把半行间距分别放置于content area box上下两侧，这样就获取了line box的高度尺寸。于是只要设置行高就可以产生一个高度，并且使文字居中。

如果一个元素是浮动的(float:left/right)，绝对定位的(position:absolute/fixed)或者是根元素(html)，那么它被称之为流外的元素(out-of-flow)。如果一个元素不是流外的元素，那么它被称之为流内的元素(in-flow)。

inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

{line-height: 30px;vertical-align: -10%;
}// 相当于

{line-height: 30px;vertical-align: -3px;    /* = 30px * -10% */
}

原文：https://www.jb51.net/html5/518714.html

http://www.softwhy.com/article-4133-1.html

https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

转载于:https://www.cnblogs.com/xjy20170907/p/11499097.html

inline元素的间距问题相关推荐

前端inline元素间隙问题解决办法
一些刚刚入门学习web前端的小伙伴在刚刚接触inline元素的时候,是不是会遇到这样一个问题,两个元素比如< span >中间总是有一个小间隙,无法去除掉,那么应该如何解决呢? 当我们给s ...
使用flex 布局让子元素左右间距相等
使用flex 布局让子元素左右间距相等效果展示使子元素左右间距相等布局三种方法 1.justify-content: space-evenly; 2.justify-content: spac ...
html清除盒子间距,inline-block元素默认间距清除
这次给大家带来inline-block元素默认间距清除,inline-block元素默认间距清除的注意事项有哪些,下面就是实战案例,一起来看一下. 话不多说,直接来看示例代码 .content{ le ...
css a 标签上下间距_CSS实用技能：去除inline-block元素间间距的7种方法
现象描述真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 两个相邻的radio之间总是多那么一点点的间距,不是margin也不是paddin ...
去除inline-block元素间间距
根本原因:inline-block元素之间之所以有空白间距是因为空格有字体大小原因. 第一种: 把代码之间的换行空白都去掉. 例如: <div>第一个inline-block元素</ ...
在html调节元素左右间距,HTML元素间距问题
在利用CSS布局时,经常会遇到一些没有定义间距padding.margin之类的内容,但是页面上却总会有一些不知从何而来的间距出现,下面就是我在自己的工作中遇到的一些常见情况的总结,及其消除方法. 1 ...
flex布局中，元素等间距设置，包括第一个元素的左边，最后一个元素的右边，也等间距
项目中很多地方会用到等间距排放的场景,使用flex 布局可以很方便的实现 .fu{display: flex;ustify-content: space-between; } 通过上面代码,可以实现子 ...
flutter - GridView 网格布局，以及设置子元素的间距和大小
基础的 GridView 布局参数说明 gridDelegate 对子元素进行修饰,由于SliverGridDelegate 是一个抽象类, 找它的实现类有 [SliverGridDelegate ...
去除inline-block元素间间距，比较靠谱的两种办法
1.使用注释符号 1 <div><span class="1">1</span></div>< ...

inline元素的间距问题

inline元素的间距问题相关推荐

最新文章

热门文章