行内元素中去掉文字的上下间距，使得文字所在元素的高度同字体高度一致的方法...

之前在p这类块元素中的文字，给line-hight=1;就可以去掉文字自带的上下间距，

像这样：

最近突然发现这个方法在行内块和块元素上好使，可当用在span或者a这类内联元素上都不好使，除了转为块元素的方法来去掉上下间距，行高设置为1去不掉内联元素文字的上下间距。

像这样：

查阅很多资料之后，得出结论：
行内元素的高度是不受行高影响的，因此设置line-height=1只能影响行内元素在容器中所占据的高度（字号大小的高度），而自己本身的高度未曾改变，哪怕是超出了父容器的高度（在给行内元素设置了背景色之后就可以直观的看到）。

解决方法：

如果需要去掉文字的上下间距，使得文字所在元素的高度同字体高度一致，那么：

　1、使用非行内元素包裹文字（p、div等）

　2、给行内元素转为块或者行内块

　3、给行内元素浮动

之后再设置line-height=1 即可去掉文字上下的间距，大功告成。

转载于:https://www.cnblogs.com/Mr-Car/p/10689517.html

行内元素中去掉文字的上下间距，使得文字所在元素的高度同字体高度一致的方法...相关推荐

html h1转换为行内,css中转换为行内样式的解决方案(css-inline)
聊聊场景发送邮件在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变解决方案这两种方案功能和 Ap ...
标签行内样式中＜style=“--clr:#1e9bff“＞是什么意思?
原代码: <a href="#" style="--clr:#1e9bff"><span>Button</span>< ...
为什么有些内联（行内）元素可以设置宽高？
为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...
CSS 块元素,行内元素,行内块元素及元素之间转换
元素的显示模式元素一般分为块级元素和行内元素元素种类排列设置样式默认包含块元素独占一行可以设置宽高容器的100% 可以包含任何标签行内元素一行可以放多个行内样式不可直接设置宽 ...
css --- 浮动元素与块框/行内框重叠时的细节
块框,可以认为是块级元素(如div.h1)的内容区 + 内边距行内框可以认为是行内元素(如span)的内容区 + 内边距当块级框/行内框和一个浮动元素重叠时,行内框的边框.背景和内容都在幅度元 ...
CSS行内元素和块级元素的水平居中，垂直居中，水平垂直居中实现
常用内联元素:a,img,input,lable,select,span,textarea,font 常用的块级元素:div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol, ...
CSS 行内格式化上下文中的各种高度计算
前言碎碎语:标题问题在昨天困扰了笔者很久很久,早上把问题提到了各网络也暂时没有回复.因为明天要早起飞异地参加一场校招面试,笔者还是很紧张的,但奈何问题不解决寝食难安--所以还是卯起劲重新思考这个问题, ...
css --- 行内框和内容区
css规定font-size的大小实际上是字体的高度可以将内容区理解为font-size的大小. 行内高可以理解为 ( (line-height) - (font-size) ) /2 然后再fon ...
html行样式怎么写,html行内样式字号怎么写
在html中,行内样式字号的写法是"".可以使用style属性规定元素的行内样式(inline style),该属性将覆盖任何全局的样式设定. 本教程操作环境:windows7系统 ...

行内元素中去掉文字的上下间距，使得文字所在元素的高度同字体高度一致的方法...

行内元素中去掉文字的上下间距，使得文字所在元素的高度同字体高度一致的方法...相关推荐

最新文章

热门文章